javascript - Angular 1.5 : Access bindToController properties inside controller

Question

我正在学习如何正确使用自定义指令的 bindToController 功能，并想知道如何从指令 Controller 访问您在 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/

所以我认为这些属性绑定(bind)到 Controller ，但看起来它们更像是绑定(bind)到范围内的 Controller 别名。

从 Controller 访问它们的好方法是什么？

谢谢

Answer 1

如果您纠正您的第一个观察者，您将看到您的 Controller 已正确绑定(bind)。

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 的第一个参数要么是一个在每个摘要循环中都被计算的函数，要么是一个字符串形式的 Angular 表达式，它在每​​个摘要循环中被计算。

通过更正，两个观察者都会看到变化。