爲什麼我們需要定製指令中的BindToController

Question

爲什麼我們需要在定製指令中使用BindToController。這個語法提供了什麼，我們不使用它就無法實現。我經歷了這麼多的文檔，但沒有得到我的答案。提前致謝！！

Answer 1

Angular一直試圖讓用戶遠離將數據直接放在$ scope上，而是將數據放入控制器中。其中一個主要動機是因爲控制器只是簡單的類，並且更容易進行單元測試。

此外，使用控制器而不是僅使用鏈接功能主要是出於同樣的原因。鏈接函數應該只用於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 
} 

現在我們可以簡單地測試PersonDirectiveController直接而不是處理$範圍的首選方法

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

Answer 2

您也可以在指令中使用controllerAs語法從Angular 1.3開始，您還需要添加bindToController屬性以確保屬性綁定到控制器而不是範圍。 允許有一個例子：

(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 
    }; 
    }); 

}()); 

在vm此控制器別名分配給controllerAs屬性和別名在控制器代碼，並在視圖中使用。 bindToController屬性設置爲true以確保屬性綁定到控制器而不是範圍。