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

如果您更正了第一个观察者，您将看到控制器已正确绑定。

update referent
set genderReferent='',
    phoneReferent='',
    faxReferent='',
    adressReferent='38, boulevard de l''Ayrolles - B.P. 145',
    supportOrganization='',
    zipCode='',
    cityReferent='',
    countryReferent='' 
where oldReferentId=5077

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; }) }的第一个参数是每个摘要周期计算的函数或字符串形式的Angular表达式，每个摘要周期都会对其进行评估。

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

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(...) {...}
}

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

2 个答案: