Angular 1.5：访问控制器内的bindToController属性

Question

我在学习如何正确使用自定义指令的bindToController功能，并想知道如何从指令控制器访问您在bindToController对象中声明的属性。

var myApp = angular.module('myApp',[]) 
    .directive('myDir', MyDir) 
    .controller('MyCtrl',['$scope', MyCtrlFn]); 

function MyCtrlFn($scope) { 
    var ctrl = this; 
    this.ctrlStr = ''; 
    this.ctrlAsStr = ''; 
    $scope.$watch(this.name, function(newValue) { 
    if(newValue) ctrl.ctrlStr += ' '+newValue; 
    }) 
    $scope.$watch('ctrl.name', function(newValue) { 
    if(newValue) ctrl.ctrlAsStr += ' '+newValue; 
    }) 
} 

function MyDir() { 
    return { 
    template: '<div>{{ctrl.name}}</div>'+ 
    '<div>CtrlStr: {{ctrl.ctrlStr}}</div>'+ 
    '<div>CtrlAsStr: {{ctrl.ctrlAsStr}}</div>', 
    scope: {}, 
     bindToController: { 
      name: '=' 
     }, 
    restrict: 'E', 
    controller: 'MyCtrl', 
    controllerAs: 'ctrl' 
    } 
} 

的jsfiddle这里：http://jsfiddle.net/jrtc1bLo/2/

于是我想到了性能结合到控制器，但似乎他们宁愿绑定到范围控制器别名。

什么是从控制器访问它们的好方法？

感谢

Answer 1

如果您更正你的第一个观察者，你会看到你的控制器绑定正确。

function MyCtrlFn($scope) { 
    var ctrl = this; 
    this.ctrlStr = ''; 
    this.ctrlAsStr = ''; 
    //DO THIS 
    $scope.$watch(function(){return ctrl.name}, function(newValue) {  
    // NOT THIS 
    //$scope.$watch(this.name, function(newValue) { 
    if(newValue) ctrl.ctrlStr += ' '+newValue; 
    }) 
    $scope.$watch('ctrl.name', function(newValue) { 
    if(newValue) ctrl.ctrlAsStr += ' '+newValue; 
    }) 
} 

的第一个参数$watch要么被评估每消化周期或者被评估的每个消化循环中的字符串形式的角表达式的函数。

随着更正，两位观察者将看到变化。

Answer 2

看看这个例子：

angular 
    .module('form') 
    .controller('FormGroupItemController', FormGroupItemController) 
    .directive('formGroupItem', formGroupItem); 

function FormGroupItemController(){} 

function formGroupItem() { 
    var directive = { 
     restrict: 'A', 
     scope: { 
      model: '=', 
      errors: '=', 
      submit: '=' 
     }, 
     bindToController: true, 
     controller: 'FormGroupItemController as vm', 
     templateUrl: 'app/form/form-group-item.html' 
    }; 

    return directive; 
} 

正如你所看到的，我有一个form-group-item指令。我用它在我的HTML像这样：

<div form-group-item model="vm.username" errors="vm.errors" submit="vm.updateUsername"></div> 

下面我就三样东西从该指令，使用了范围，我基本上是复制他们（它们绑定到控制器）的指令本身。这三件事是：模型,错误和提交。

错误是一堆可能的错误（数组），模型仅仅是一个值，而提交是一个提交函数。

现在这三件事都在FormGroupItemController的范围内，我可以在form-group-item.html中将它们用作$scope或controllerAs，无论我指定哪一个。在这种情况下，我使用了controllerAs语法。

所以指令之前有什么绑定到它的控制器，它只是一个空的构造是这样的：

function FormGroupItemController() {} 

绑定后，它看起来就像这样：

function FormGroupItemController() { 
    this.model = 'blah'; 
    this.errors = [...]; 
    this.submit = function(...) {...} 
}