使用 controllerAs 时在指令中访问父作用域

Question

我目前有一个使用父控制器范围内的属性的指令：

.controller('MainCtrl', function($scope) {
  $scope.name = 'My Name';
})

.directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      console.log($scope.name); // logs 'My Name'
    }
  };
})

现在我在控制器中使用controllerAs 语法，但我不知道如何在指令的控制器中获取对控制器对象的引用。

.controller('MainCtrl', function() {
  var vm = this;
  vm.name = 'My Name';
})

.directive('myDirective', function() {
  return {
    scope: true,
    controller: function($scope) {
      console.log(vm.name); // logs 'Undefined'
    }
  };
})

a plunkr 说明了这个问题。

我还发现 this article 试图解释类似的东西，但在这种情况下，他只是重复使用完全相同的控制器。

Answer 1

当您使用 ControllerAs 语法时，会在 $scope 对象上创建一个属性，该对象是您的控制器的别名。例如，ng-controller="MainCtrl as vm" 为您提供$scope.vm。 $scope 隐含在 HTML 中，因此在 HTML 中访问 vm.name 与在 JavaScript 中访问 $scope.vm.name 相同。

在控制器中，您可以访问this.name 或$scope.vm.name，它们在功能上是等效的。但是，在其他控制器中，this 将引用该特定控制器，因此this.name 将不起作用。

因此，在这种情况下，您可以使用 $scope.vm.name 在指令的控制器中访问所需的属性。 http://plnkr.co/edit/WTJy7LlB7VRJzwTGdFYs?p=preview

但是，您可能还希望将 ControllerAs 语法与指令一起使用；在这种情况下，我建议不要使用vm 作为控制器名称，而是使用唯一的名称来帮助识别您所指的控制器。 MainCtrl as main，然后引用main.name会更清楚。

但是，如果可能，我建议使用隔离作用域，因为它可以让您完全消除将$scope 注入指令的需要，并允许您的指令是自包含且可重用的。

旁注，bindToController: true, 如果您不使用隔离作用域，则不会执行任何操作；当您正在使用隔离范围时，它会在隔离控制器上创建属性以匹配传入的范围，从而允许您访问传入的值而无需$scope。

Answer 2

一种选择是遍历$scope 链，直到找到 vm。

app.directive('myDir', function() {
  return {
    restrict: 'E',
    scope: true,
    template: '<div>my directive</div>',
    bindToController: true,
    controller: function($scope) {
      console.log($scope.name2); // logs 'bound to the controller scope'
      console.log($scope.$parent.vm.name); // logs 'bound to the controller vm'
    }
  };  
});

但是，这可能真的很脆，而且闻起来有点臭。

更复杂和深思熟虑的方法是通过传递的参数将控制器范围的属性绑定到指令。

HTML：

<my-dir name="vm.name" />

JS：

app.directive('myDir', function() {
  return {
    restrict: 'E',
    scope: {
      name: "="
    },
    template: '<div>my directive</div>',
    bindToController: true,
    controller: function($scope) {
      console.log($scope.name); // logs 'bound to the controller vm' 
    }
  };  
});

见plunkr