AngularJS 是一种流行的前端框架，它的指令（directive）是其核心特性之一。指令是一个带有特殊属性的 HTML 标签或属性，可以让开发者扩展 HTML 的功能。在 AngularJS 中，指令可以通过属性传递值，本文将介绍 AngularJS 中如何传递属性值。
基本语法
在 AngularJS 中，指令可以通过绑定属性来传递值。绑定属性的语法是在属性名前加上一个前缀，通常是 ng-。例如，要将一个变量传递给指令，可以这样写：
<my-directive ng-model="myVar"></my-directive>
在这个例子中，ng-model 是一个绑定属性，它的值是 myVar，即一个变量名。这个变量可以在指令中通过 $scope 对象来访问。
传递字符串
要传递一个字符串，只需将字符串放在引号中即可。例如：
<my-directive ng-message="'Hello, world!'"></my-directive>
在指令中，可以通过 $attrs 对象来获取这个字符串：
app.directive('myDirective', function() {
return {
link: function(scope, element, attrs) {
var message = attrs.ngMessage; // 'Hello, world!'
}
};
});传递变量
要传递一个变量，只需将变量名放在绑定属性的值中即可。例如：
<my-directive ng-message="myVar"></my-directive>
在指令中，可以通过 $scope 对象来访问这个变量：
app.directive('myDirective', function() {
return {
link: function(scope, element, attrs) {
var message = scope.$eval(attrs.ngMessage); // 计算 myVar 的值
}
};
});传递表达式
如果要传递一个表达式，可以将表达式放在花括号中，例如：
<my-directive ng-message="{{greeting + ', ' + name + '!' }}"></my-directive>在指令中，可以通过 $attrs 对象来获取这个表达式的字符串，然后使用 $parse 函数来计算表达式的值：
app.directive('myDirective', function($parse) {
return {
link: function(scope, element, attrs) {
var expression = attrs.ngMessage; // "greeting + ', ' + name + '!'"
var message = $parse(expression)(scope); // 计算表达式的值
}
};
});传递对象
如果要传递一个对象，可以使用 JSON 格式来表示这个对象，例如：
<my-directive ng-options="{value: 'foo', label: 'bar'}"></my-directive>在指令中，可以通过 $parse 函数来计算这个 JSON 对象的值：
app.directive('myDirective', function($parse) {
return {
link: function(scope, element, attrs) {
var options = $parse(attrs.ngOptions)(scope); // 计算 JSON 对象的值
}
};
});总结
在 AngularJS 中，指令可以通过绑定属性来传递值，可以传递字符串、变量、表达式和对象。要获取这些值，可以使用 $attrs 对象、$scope 对象或 $parse 函数。掌握这些技巧可以让开发者更好地利用 AngularJS 指令的强大功能。
示例代码
-- -------------------- ---- -------
--------- -----
----- --------- ---------------
------
----- ----------------
---------------- --------- ------------
------- ---------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
---------------------------- ---------------- -
------ -
----- --------------- -------- ------ -
--- ------- - ----------------
--- ------- - -------------------------------
-------------------- ---------
-
--
---
---------
-------
------
------------- ------------------- ------------------------
------------- ----------------------------------
------------- ---------------------- - -- - - ---- - --- -------------------
------------- ------------------- ------ ------ -----------------------
--------
--- ------ - ---------------------------------------
------------ - ------- ------------
--------------- - -----
----------- - ------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f401af2b3ccec22fc6d2d2