以下是使用指令的简单示例(改编自官方指南) - JSFiddle
<div ng-controller="Controller">
<my-customer></my-customer>
</div>
angular.module('my-module', [])
.controller('Controller', function($scope) {
$scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
})
.directive('myCustomer', function() {
return {
restrict: 'E',
template: 'Name: {{vojta.name}} Address: {{vojta.address}}'
}
});
上述指令与其父控制器具有相同的范围。如何使用控制器作为语法执行相同操作?
可以使用隔离范围执行此操作,但我正在寻找一种解决方案,您不需要为该指令创建单独的范围。这简直可能吗?
我尝试了来自 controllerAs , bindToController 和 require:'^ ngController'的所有内容,但没有任何成功。
答案 0 :(得分:1)
对于controllerAs
语法,在控制器中创建一个具有this
引用的ViewModel对象,如下所示:
var vm = this;
vm.vojta = { name: 'Vojta', address: '3456 Somewhere Else' }; //your object
在模板中,您必须使用as
为您的控制器提供别名,如下所示:
<div ng-controller="Controller as ctrl"> //now inside this scope use 'ctrl' which acts as the 'scope' of the controller.
<my-customer></my-customer>
</div>
在你的指令中:
template: 'Name: {{ctrl.vojta.name}} Address: {{ctrl.vojta.address}}' //notice the use of 'ctrl'
工作小提琴here.