我正在学习AngularJS。现在，我正在尝试使用这些指令。我创建了一个指令，但无法使其正常工作。我可以使用$ scope做到这一点，但我想知道如何不使用它。代码：
<div ng-app="myApp" ng-controller="controls">
<div the-name></div>
</div>
<script src="angular.js"></script>
<script>
var modu = angular.module("myApp", []);
modu.controller("controls", [function() {
var self = this;
self.user = {
name : "Pedro",
lastname: "Delgado"
};
}]);
modu.directive("theName", [function() {
return {
template: 'Name: {{user.name}}'
};
}]);
</script>
结果为：
Name:
而且我要：
Name: Pedro
有人可以帮助我吗？非常感谢！
这称为控制器即语法。您需要在模板中为控制器创建别名：
<div ng-app="myApp" ng-controller="controls as ctrl">
<div the-name></div>
</div>
然后在指令模板中使用{{ctrl.user.name}}。
但理想情况下，您要隔离指令的范围，因为您不希望它知道其周围环境以及使用了哪种controllerAs别名。
此版本的指令将更可重用：
modu.directive("theName", [function() {
return {
scope: {
user: '='
},
template: 'Name: {{user.name}}'
};
}]);
用法是：
<div ng-app="myApp" ng-controller="controls as ctrl">
<div the-name user="ctrl.user"></div>
</div>
因此，在这种情况下，指令（和模板）对使用的环境一无所知（关于控制器前缀等），它只关心是否在其中传递了正确的用户对象。这就是孤立范围的要点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句