兒童範圍內的行爲bindToController與隔離範圍

我正在玩指令的bindToController選項。我偶然發現了使用子範圍的行爲與孤立範圍之間的看似奇怪的區別。當我使用隔離的作用域時，將爲該指令創建一個新的作用域，但對綁定的控制器屬性的更改將轉發到父作用域。然而，當我使用一個子範圍，而我的例子中斷。（使用bindToController使用童工範圍應根據http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html#improvements-in-14被允許）兒童範圍內的行爲bindToController與隔離範圍

代碼：

{ 
    restrict: 'E', 
    scope: {}, 
    controller: 'FooDirCtrl', 
    controllerAs: 'vm', 
    bindToController: { 
     name: '=' 
    }, 
    template: '<div><input ng-model="vm.name"></div>' 
};

工作演示https://jsfiddle.net/tthtznn2/

使用兒童範圍的版本：

{ 
    restrict: 'E', 
    scope: true, 
    controller: 'FooDirCtrl', 
    controllerAs: 'vm', 
    bindToController: { 
     name: '=' 
    }, 
    template: '<div><input ng-model="vm.name"></div>' 
};

演示： http://jsfiddle.net/ydLd1e00/

對名稱的更改被轉發到子作用域，但不轉發到父作用域。這與綁定到一個孤立的範圍相反。爲什麼是這樣？

來源

2015-10-06 Jan-Willem Gmelig Meyling

因爲vm.name是字符串和JavaScript傳值？可能會再創建一個像vm.data.name這樣的嵌套對象並綁定數據。 – YOU

實際上，在後一種情況下綁定到一個對象（請參閱：http://jsfiddle.net/sbvm1nd4/）。儘管如此，我仍然不明白孤立子域與子域之間爲什麼會有所不同，但我希望孤立域也會遇到同樣的問題。 –

其原型繼承的JavaScript性質 - https://github.com/angular/angular.js/wiki/Understanding-Scopes，我個人認爲角度可以改變這種行爲是一致的，因爲所有的表達式都是通過角度的AST來分析的，但是可能是他們選擇遵循javascript的本質。 – YOU

這是因爲您對兩個控制器使用相同的別名（並且與註釋中提到的對象vs字符串值無關）。

如您所知，controller as alias語法只是在作用域上創建alias屬性並將其設置爲控制器實例。由於在這兩種情況下（MainCtrl和FooDirCtrl）您都使用vm作爲別名，所以在「」正常子範圍的情況下，您正在「隱藏」MainCtrl別名。（在這種情況下，「正常」的意思是「從父範圍原型繼承」）。因此，當您試圖在新範圍上評估vm.name（vm）MainCtrl以獲得「父值」時， FooDirCtrl.name（這是未定義的），當您嘗試將其分配回父作用域時會發生同樣的情況。

隔離區作用域版本不受影響，因爲作用域不是從它的父作用域繼承的。

Updated fiddle

UPDATE： 以源代碼仔細一看，這可能是一個錯誤（因爲加入了bindToController非隔離示波器支持「追溯」）。由於原型繼承，我們似乎已經擺脫了這個bug，但當名稱相撞時，我們運氣不佳。

我不得不仔細看看它是否確實是一個錯誤，如果它是「可修復的」，但現在你可以通過爲你的控制器使用不同的別名來解決它（見上面的小提琴）。

這就是爲什麼我不喜歡使用vm我的電腦板別名（儘管它是通過流行的風格指南建議）（的一部分）:)

讓我們在angular.js#13021跟蹤此。

來源

2015-10-06 18:17:34 gkalpak

感謝您的回覆。我會密切關注線程。當我們對這個問題進一步討論時，我會接受答案。我順便也不是'vm'的粉絲，tbh，我偷了小提琴，只是調整了第二個例子;-) –

@ Jan-WillemGmeligMeyling：順便說一句，我提交了一個修正：[angular。 js＃13025]（https://github.com/angular/angular.js/pull/13025） – gkalpak

它被合併。所以，這會從v1.5.0-beta.2開始正常工作。 – gkalpak

兒童範圍內的行爲bindToController與隔離範圍

回答

相關問題