Question

我有角狀的部件設置是這樣的：

(function(angular) { 
'use strict'; 
angular.module('bar', []) 
angular.module('bar').component('bar', { 
template: '<h1 ng-show="showMe">It worked</h1>', 
bindings: { 
    showMe: '=' 
    } 
}); 
})(window.angular); 

和另一個設置這樣

(function(angular) { 
'use strict'; 
angular.module('foo', []) 
angular.module('foo').component('foo', { 
template: '<button ng-click="showMe = true">Click Me</button>' + 
     '<bar showMe = "showMe"></bar>' 
}); 
})(window.angular); 

我的index.html

<foo>Hello Plunker!</foo> 

但我無法在欄中獲取模板來工作。我錯過了什麼？

我這裏有一個plunkr：https://plnkr.co/edit/Qj9ZL9NFtdXWHBY0yzJf?p=preview

Answer 1

我懷疑你是戰鬥的事實，分量範圍總是隔離（以便訪問父範圍只存在，如果你申報的結合）

我懷疑你的代碼需要看起來像這樣：

<foo newPopup="'something'"> 
    <!-- bar inside foo's template --> 
    <bar newPopup="$ctrl.newPopup"></bar> 
    <!-- end foo's template --> 
</foo> 

指令提供訪問默認父範圍，這或許可以解釋爲什麼它的工作原理爲指導您在內部組件（大概吧）竟被d可以訪問父$ ctrl（因爲指令默認也不設置controllerAs）。

編輯：我仍然認爲我的原始答案是真實的，並與指示這與範圍工作通過。在我猜測的plnkr中還有其他一些修正（下面的兩個和三個）與原始問題無關，因爲如果他們是我無法想象它會作爲指令工作。

做以下修改時應該讓你的普拉克工作：

1. 當你引用一個範圍變量的組成部分，以$ CTRL前綴它（或任何你controllerAs值是該組件$ CTRL是在沒有controllerAs語法的組件中的缺省值是指令的缺省值）。
2. 使foo的模塊依賴於杆（它被消耗，這樣它必須依賴於它）
3. 當指的駝峯範圍（對於指令）或在模板變化首都結合（對於組分）值爲小寫，並添加破折號（例如駝背 - >駝回）

https://plnkr.co/edit/ka2owI?p=preview

foo.js

(function(angular) { 
    'use strict'; 
    angular.module('foo', ['bar']) 
    angular.module('foo').component('foo', { 
    template: '<button ng-click="$ctrl.showMe = true">Click Me</button>' + 
      '<bar show-me = "$ctrl.showMe"></bar>' 
}); 
})(window.angular); 

bar.js

(function(angular) { 
    'use strict'; 
    angular.module('bar', []) 
    angular.module('bar').component('bar', { 
    template: '<h1 ng-show="$ctrl.showMe">It worked</h1>', 
    bindings: { 
     showMe: '=' 
    } 
    }); 
})(window.angular); 

爲了更清楚（因爲$ CTRL上面並在作出其使用的普拉克使用中出現兩次ambigious），你可以在這裏有單獨的controllerAs值和Foo的不應該在欄訪問。 foo.js和bar.js可能只是合理如下所示，這將仍然工作：

foo.js

(function(angular) { 
    'use strict'; 
    angular.module('foo', ['bar']) 
    angular.module('foo').component('foo', { 
    controllerAs: 'fooCtrl', 
    template: '<button ng-click="fooCtrl.showMe = true">Click Me</button>' + 
      '<bar show-me = "fooCtrl.showMe"></bar>' 
}); 
})(window.angular); 

吧。js

(function(angular) { 
    'use strict'; 
    angular.module('bar', []) 
    angular.module('bar').component('bar', { 
    controllerAs: 'barCtrl', 
    template: '<h1 ng-show="barCtrl.showMe">It worked</h1>', 
    bindings: { 
     showMe: '=' 
    } 
    }); 
})(window.angular);