カスタムディレクティブにBindToControllerが必要な理由

Question

カスタムディレクティブにBindToControllerが必要なのはなぜですか？この構文は、それを使用せずには達成できないものです。私は非常に多くのドキュメントを通過しましたが、私の答えは得られませんでした。前もって感謝します！！

Answer 1

Angularは、$ scopeに直接データを置くのではなく、むしろデータをコントローラに入れる代わりに、ユーザーを移動させようとしています。これに対する主な動機の1つは、コントローラが単純なクラスであり、単体テストがはるかに容易であるためです。

また、リンク機能を使用する代わりにコントローラを使用することは、主に同じ理由によるものです。リンク関数は、DOM操作や、jqueryプラグインをラップするか、DOMイベントに直接登録するなど、角度のないその他のものに対してのみ使用する必要があります。そこでここでは、一緒にそのすべてを置く

は、カスタムディレクティブ

angular.module('app').directive('person', function() { 
    return { 
    restrict: 'E', 
    controller: PersonDirectiveController, 
    controllerAs: 'vm', 
    bindToController: true, 
    scope: { 
     'age': '=' 
    }, 
    link: function(scope, element, attributes) { 

    } 
    }; 

}); 

function PersonDirectiveController() { 
    var vm = this; 
    vm.name = 'Bob'; 
    //vm.age is passed in through scope and because of bindToController 
} 

を作成するための好ましい方法は、今、私たちは単にむしろ$の範囲で

describe('PersonDirectiveController', function() { 
    it('has a name', function() { 
    var vm = new PersonDirectiveController(); 
    expect(vm.name).toEqual('Bob'); 
    }); 
}); 

Answer 2

を対処するよりも、直接PersonDirectiveControllerをテストすることができますです

また、Angular 1.3で始まる指示文の中でcontrollerAs構文を使用することもできます。また、bindToControllerプロパティを追加して、プロパティがスコープではなくコントローラに確実にバインドされるようにする必要があります。 は例有します：vmのこのコントローラ別名で

(function() { 

var app = angular.module('directivesModule'); 

app.directive('isolateScopeWithControllerAs', function() { 

    var controller = function() { 

      var vm = this; 

      vm.items = {} 

      vm.addItem = function() { 
       //Add new customer to directive scope 
       vm.items.push({ 
        name: 'New Directive Controller Item' 
       }); 
      }; 
    };  

    var template = '<button ng-click="vm.addItem()">Add Item</button>' + 
       '<ul><li ng-repeat="item in vm.items">{{ ::item.name  }}</li></ul>'; 

    return { 
     restrict: 'EA', //Default for 1.3+ 
     scope: { 
      datasource: '=', 
      add: '&', 
     }, 
     controller: controller, 
     controllerAs: 'vm', 
     bindToController: true, //required in 1.3+ with controllerAs 
     template: template 
    }; 
    }); 

}()); 

をcontrollerAsプロパティに割り当てられ、エイリアスは、コントローラコードおよびビューで使用されています。 bindToControllerプロパティはtrueに設定され、プロパティがスコープではなくコントローラにバインドされていることを確認します。