Is it possible for an element to have multiple directives with their own unique scopes?
For example, let's consider a custom directive's child element with the controller's scope along with another directive (such as "ng-class"):
<custom-directive data-model="model">
<input class="child" data-ng-class="controllerScopeValue">
</custom-directive>
Now, we want to include an additional directive with an isolated scope for the child. Here's a sample code snippet:
angular.module('core').directive('customDirective', [function($compile) {
return {
scope: {
'model': '='
},
compile: function(templateElement, templateAttrs) {
templateElement.children().attr('data-ng-model', 'directiveScopeValue');
return function($scope) {
$scope.directiveScopeValue = 'directive\'s scope value';
}
}
};
}]);
So, how can we maintain separate scopes for each directive?