Menu
I created two directives:
directivesModule.directive("capital", function () {
return {
scope: {
capital: "@"
},
link: function () {}
}
})
directivesModule.directive("country", function () {
return {
scope: {
country: "@"
},
link: function () {}
}
})
Next, I use them in the same element:
<div country="Russia" capital="Moscow"></div>
As a result, I get an error: Error: [$compile:multidir] Multiple directives [capital, country] asking for new/isolated scope on: <div country="Russia" capital="Moscow">
How do I get the attribute values without scope?
These directives will not necessarily be used in conjunction.
863
... 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.
Isolated scope directive is a scope that does not inherit from the parent and exist on its own. Scenario: Lets create a very simple directive which will show the object from the parent controller.
Isolate Scope: If the need is to reuse the component (directive) throughout your app, consider creating isolate scopes using scope option. The concept of isolate scope is used to separate the scope inside a directive from the scope outside.
Scope Hierarchies Every angularJS application can have only one root scope as it is the parent scope. But it can have more than one child scope. New scopes can be created by directives which are added to parent scope as child scope.
According to your code, you don't need isolated scope to get attribute value. Just use this:
directivesModule.directive("capital", function ($parse) {
return {
link: function (scope, element, attrs) {
// get attrs value
attrs.capital
}
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
