Can't cast from isolated scope to directive-negative effects of setting scope to false?
I have a situation where I would like to $broadcast
reference a directive from within a function where that directive has an isolated scope. Unfortunately, since the directive is scope
not prototypically inherited from the parent $scope
, it is not possible to broadcast from within the isolated area - link.
I know that using scope: false
in my directive will force the directive to use the parent's scope, potentially oversaturation of the parent's scope, and lead to possible name collisions, etc., making the directive less reusable.
So maybe I can be careful about filling the parent area. Are there other reasons why I cannot use scope: false
in a reusable directive? Is it just preference and "tidiness" or are there other negative consequences?
As far as I know, there is no alternative for getting the functionality that is achieved by translating from within the directive binding function, other than possibly having a directive modifying the service (which is not possible in my situation due to the parent scopes hierarchy) - as far as I can tell, the use $broadcast
is the only one way. Any direction is appreciated.
Thank!
EDIT. To be clear, my intention is to broadcast from within the isolated area, down to the parent objects of the sphere, i.e.
Js
.controller('parent', function ($scope) {
$scope.parent = 'parentProperty';
})
.directive('isolate', function() {
return {
scope: {},
template: '<div ng-click="click()">Click</div>',
link: function (scope) {
scope.click = function () {
console.log('clicked,but no broadcast');
scope.$broadcast('event', 'string');
}
}
};
})
.directive('child', function () {
return {
link: function(scope) {
scope.$on('event', function (e, event) {
console.log(event);
});
}
};
});
Html
<body ng-controller="parent">
<div isolate>Click me to broadcast
</div>
<div child>
</div>
</body>
source to share
I think you misinterpreted the article you are linking to. You can broadcast events to highlight areas. It is even stated that in the post you link:
As you can see, the selection area may have been listening for events broadcast down the area hierarchy; however, he could not see the corresponding value for the "pingCount" scope in his parent scope.
The trick is to remember that in AngularJS it $broadcast
sends events down the parent / child scopes hierarchy (including selection scopes). You can use $emit
to send events down the hierarchy.
It looks like you want to use $emit
links inside your function, this way the event will go to the parent scopes. Explanation from the docs.
EDIT
Okay, here's a simple approach using two events. The directive is first used $emit()
to send an event to the parent scope. The parent field is used $on()
to wait for this event. When this happens, it uses $broadcast()
to dispatch another event to all child scopes.
This is primitive and will probably be a breakdown. Instead, you can look at using the require
directives attribute and have a controller with an API that the child directives use to communicate.
source to share