Multiple directives [ngController, ...] asking for new/isolated scope - angularjs

Question

I have the following (https://jsfiddle.net/hhgqup4f/5/):
<div parent parent-model="vm.model1" ng-controller="Controller as vm">
Parent
</div>
And the controller is:
app.controller("Controller", Controller);
function Controller() {
var vm = this;
vm.model1 = "My Model 1";
vm.model2 = "My Model 2";
}
And then I have a directive as follows:
app.directive("parent", parent);
function parent() {
var parent = {
controller: ["$scope", controller],
replace: false,
restrict: "A",
scope: {
model: "="
}
};
return parent;
function controller($scope) {
console.log($scope.model);
}
}
With parent-model="vm.model1" I am trying to say which property from the controller should be used by the directive. But when I do console.log($scope.model) in the directive I get the error:
"Error: [$compile:multidir] Multiple directives [ngController, parent (module: app)] asking for new/isolated scope on: <div parent="" parent-model="vm.model1" ng-controller="Controller as vm">
How to solve this?

Answer 1

The error ...
"Error: [$compile:multidir] Multiple directives [ngController, parent (module: app)] asking for new/isolated scope on: <div parent="" parent-model="vm.model1" ng-controller="Controller as vm">
... is quite illustrative as AngularJS doesn't allow multiple directives (on the same DOM level) to create their own isolate scopes.
According to the documentation, this restriction is imposed in order to prevent collision or unsupported configuration of the $scope objects.
Normally a directive is supplied with an isolate scope with an intention towards componentization or reuse of some logic/action attached to the DOM.
Therefore, it makes sense that two reusable components cannot be merged together to produce a combined effect (at least in AngularJS).
Solution
Change your directive usage such that it is supplied with the required properties from its immediate parent (which in this case is the ngController directive).
<div ng-controller="Controller as vm">
<div parent parent-model="vm.model1"></div>
</div>
Similarly, you can access the passed properties to the isolate scope of the directive in their normalized format:
app.directive('parent', function(){
return {
scope: {
parentModel: '=' // property passed from the parent scope
},
controller: function($scope){
console.log($scope.parentModel);
}
};
});
Demo
Directive to Directive Communication
Two or more directives with isolate scopes, as mentioned earlier, can't be used on the same DOM element. However, it is possible for one of the directives to have an isolated scope. Other directives, in this case, can communicate if required by requireing its controller as such:
<div dir-isolate dir-sibling></div>
...
.directive('dirIsolate', function(){
return {
scope: {},
controller: function(){
this.askSomething = function(){
return 'Did you ask for something?';
};
}
};
})
.directive('dirSibling', function(){
return {
require: 'dirIsolate', // here is the trick
link: function(scope, iElement, attrs, dirSiblingCtrl){ // required controller passed to the link function as fourth argument
console.log(dirSiblingCtrl.askSomething());
}
};
});