使用 'controller as' 语法时指令的共享范围

Question

这里是一个使用指令的简单例子（改编自官方指南） - 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}}'
     }
 });

上述指令与其父控制器具有相同的作用域。我如何使用 controller as 语法做同样的事情？

可以使用隔离作用域执行此操作，但我正在寻找一种解决方案，您无需为指令创建单独的作用域。有可能吗？

我尝试了 controllerAs、bindToController 和 require: '^ngController' 中的所有方法，但没有任何成功。

Answer 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'

工作fiddlehere.

使用 'controller as' 语法时指令的共享范围

Shared scope of a directive when 'controller as' syntax is used

angularjs

angularjs-directive

angularjs-scope

angularjs-controlleras