Controladores diretivos AngularJS que exigem controladores diretivos pai?
Eu poderia estar pensando sobre isso completamente para trás, mas eu estou tentando fazer três diretivas aninhadas, vamos chamá-los: tela, componente e widget. Eu quero que o widget seja capaz de desencadear algum comportamento no componente, o que por sua vez desencadeia algum comportamento na tela. Assim:
.directive('screen', function() {
return {
scope: true,
controller: function() {
this.doSomethingScreeny = function() {
alert("screeny!");
}
}
}
})
.directive('component', function() {
return {
scope: true,
controller: function() {
this.componentFunction = function() {
WHAT.doSomethingScreeny();
}
}
}
})
.directive('widget', function() {
return {
scope: true,
require: "^component",
link: function(scope, element, attrs, componentCtrl) {
scope.widgetIt = function() {
componentCtrl.componentFunction();
};
}
}
})
<div screen>
<div component>
<div widget>
<button ng-click="widgetIt()">Woo Hoo</button>
</div>
</div>
</div>
Eu posso exigir componentes pai no link de um widget usando fnrequire: "^component"
, mas como faço para dar acesso ao controlador de componentes para sua tela de contenção?
O que eu preciso é o componente WHAT in, então quando você clica no botão do widget, ele alerta "screeny!".
Obrigado.