使用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'
    }
  };
})

这是一个说明问题的傻瓜.

我还发现这篇文章试图解释类似的东西,但在这种情况下,他只是重用完全相同的控制器.

Answer 1

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

在控制器中,您可以访问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.