「控制器爲」與隔離範圍內的指令不隔離

我正試圖學習在AngularJS中構建自定義指令。目前我正在使用AngularJS 1.5.8。「控制器爲」與隔離範圍內的指令不隔離

我試圖創建一個帶有分離範圍一條指令的一個例子，其中控制器範圍不可見，這樣我可以選擇性地通過將其添加到暴露的東西「範圍：{}」。在這個例子中，我得到的期望是'Name：Street：'，因爲ctrl.customer應該對指令不可用。然後，我會將「customer：'='」添加到「範圍：{}」，然後我會得到「名稱：David Street：123 anywhere street」。不幸的是，我寫了這個指令後得到了「名稱：大衛街：任何地方的街道123」。

東西我曾嘗試：

設置「bindToController：真正的」
刪除「範圍：{}」和設置「bindToController：{}」（所以我加上「顧客： '='」）
設置「bindToController：false」（不妨吧？）
加載html後反覆敲擊shift-F5，確保我沒有緩存舊文件。

testScope.js：

var app = angular.module('scopeModule',[]); 

app.controller('Controller',[function(){ 
    var vm = this; 
    vm.customer = { 
     name: 'David', 
     street: '123 anywhere street' 
    }; 
}]); 

app.directive('sharedScope', function() { 
      return{ 
       scope:{}, 
       template: 'Name:{{ctrl.customer.name}} Street:{{ctrl.customer.street}}', 
       controller: 'Controller', 
       controllerAs: 'ctrl', 
       bindToController: true 
      }; 
});

index2.html：

<!doctype html> 
<html ng-app="scopeModule"> 
    <body> 
     <shared-scope></shared-scope> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
     <script src="testScope.js"></script> 
    </body> 
</html>

來源

2016-09-19 Thomas Hodges

你錯了。隔離範圍的要點是確保指令範圍與外部範圍隔離，即使用該指令的視圖的範圍。如果指令有自己的控制器，並且控制器公開數據，那麼指令當然可以訪問這些數據。 –

或者說這個指令有點不同，控制器就是它的範圍，所以無論你放在它裏面什麼都可以直接使用 – maurycy

Controller是sharedScope指令的控制器。它是一個單一的實體。因爲控制器和模板都屬於指令，因此指令的控制器中的this是ctrl。

沒有理由將指令的範圍與其本身分開。

隔離作用域與其他指令的作用域隔離。 From the reference：

{...}（對象散列）：爲指令的元件創建一個新的「隔離」範圍。 '孤立'範圍與中的正常範圍不同，它不會從其父範圍原型繼承。創建可重用組件時，這是有用，不應該意外讀取或修改父範圍中的數據。

這意味着，如果sharedScope指令沒有控制器和家長指令有Controller控制器，這

<div ng-controller="Controller as ctrl"> 
    <shared-scope></shared-scope> 
    </div>

將導致

名稱：街道：

輸出。

來源

2016-09-19 19:35:05 estus

好的。這看起來像我想要使用的。我正在學習使用$ scope而不是'Controller as'的教程，所以我一直在試圖將所有代碼轉換爲現代語法，因爲我遵循教程。 –

如果我使用它，那麼我將如何修改我的指令以訪問該控制器？我試過'範圍：{客戶：'='}'但沒有得到任何東西，'scope：{ctrl.customer：'='}給了我一個錯誤。 –

當以'scope：{customer：'='}'的形式提供綁定時，預計綁定作用域屬性將作爲父級作用域的屬性傳遞給孤立，就像'

'一樣。假設'sharedScope'應該在此設置中具有與'Controller'不同的控制器（例如，一個空函數）。 – estus

「控制器爲」與隔離範圍內的指令不隔離

回答

相關問題