I have three directives, "parenta", "parentb", and "childb". The first two are siblings while the third one is a direct child of "parentb".
When attempting to call a controller method from "parenta", it does not work. Strangely, calling a method on the "childb" controller FROM "parenta" seems to be working instead. What could be causing this unexpected behavior?
var app = angular.module("app", []);
app.directive("parenta", function () {
return {
template: "<section><div ng-click='vm.a()'>Rendered by a</div></section>",
replace: false,
controllerAs: "vm",
controller: function () {
this.a = function () {
console.log("Function A called!");
}
}
}
})
app.directive("parentb", function () {
return {
template: "<childb></childb>",
replace: false
}
})
app.directive("childb", function () {
return {
template: "<section><div ng-click='vm.b()'>Rendered by b</div></section>",
replace: false,
controllerAs: "vm",
controller: function () {
this.b = function () {
console.log("Function B called!");
}
}
}
})
HTML:
<div ng-app="app">
<parenta></parenta>
<parentb></parentb>
</div>
View Codepen Example: http://codepen.io/anon/pen/pJMpVe