I'm having an issue where I'm using require in both
myDirectiveChild1 -- C1
myDirectiveChild2 -- C1
The children's directive require: ^myDirectiveParent -- P
P defines $scope.myVar
but C1 and C2 seem to be over-writing the value of parent P's $scope.myVar
instead of each having their own copy.
Is that normal?
How can I get C1,C2 to have their own values?
When you define a directive, you can define whether a directive creates a child scope scope: true, creates an isolate scope: scope: { }, or just uses the same outer scope (default): scope: false.
When your directive defines values on the scope, the default option is almost always the wrong one, because you can inadvertently overwrite the outer scope's property (or, if you intend to overwrite it, then you directive would be tightly coupled with that scope).
Your directives c1 and c2 seem to have scope: false. Instead, consider creating a child scope for both of them.
.directive("c1", function(){
return {
scope: true, // creates a child scope for c1
link: function(scope, element, attrs){
scope.myVar = "foo"; // will not overwrite the parent's myVar
}
}
});
And so, each one would shadow the parent's myVar with their own:
<parent>
<c1></c1>
<c2></c2>
</parent>
Note that putting the two child directives on the same element will make them share a scope and one would overwrite the other:
<div c1 c2></div>
Note also, that require property only gives you a reference to the parent's controller. So, the parent can define an API through which those directives that require it can invoke actions. This has nothing to do with scope and scope inheritance.
Read more about creating directives in Angular's directive guide, where concepts like these are described in more detail.
Related
I have a directive twice on a page, but it keeps overwriting itself.
Meaning, the dialogId gets overwritten by the next instance of example-dialog in the template instead of keeping their own dialogIds.
angular.module('directives')
.directive('exampleDialog', ["$rootScope", "$timeout", "ngDialog", "$compile", '$templateRequest', function ($rootScope, $timeout, ngDialog, $compile, $templateRequest) {
return {
templateUrl: "/dialog.component.html",
transclude: {
button: '?dialogButton',
title: '?dialogTitle',
body: '?dialogBody',
footer: '?dialogFooter'
},
replace: true,
link: function (scope, el, attrs, ctrl, transclude) {
var dialogId = scope.blah.id; // gets overwritten - so when scope.open() gets called, the last instance ID gets used for both
scope.open = function(){
console.log(dialogId) // prints the same for both directives instead of the unique dialogId.
}
},
controller: function ($scope) {
}
}
}]);
With the following HTML:
<example-dialog>
<dialog-button>
ExampleButton1
</dialog-button>
<dialog-title ng-non-bindable>Title1</dialog-title>
<dialog-body ng-non-bindable>
<div ng-include="'template1.tpl.html'"></div>
</dialog-body>
<dialog-footer ng-non-bindable>
</dialog-footer>
</example-dialog>
<example-dialog>
<dialog-button>
ExampleButton2
</dialog-button>
<dialog-title ng-non-bindable>Title2</dialog-title>
<dialog-body ng-non-bindable>
<div ng-include="'template2.tpl.html'"></div>
</dialog-body>
<dialog-footer ng-non-bindable>
</dialog-footer>
</example-dialog>
How can I get them to save their own references while still inheriting their parents' scope?
EDIT
Someone recommended that I use scope: true which is supposed to create classic prototypal inheritance.
However, When I try that - open() from the <dialog-button> tansclusion point doesn't work now, along with any other bindings in the template.
You should isolate the scope of your directive. by adding scope:{} in your return statement.
By doing this your directive will create its own controlled scope and you will not be able to get any value from your parent scope(Basically no conflicts from parent scope).. To access value from parent controller/scope you will need to pass them explicitly.
To complet the previous answer, you can see in angular official doc ( here ) that :
The scope property can be false, true, or an object:
false (default): No scope will be created for the directive. The
directive will use its parent's scope.
true: A new child scope that prototypically inherits from its parent
will be created for the directive's element. If multiple directives on
the same element request a new scope, only one new scope is created.
{...} (an object hash): A new "isolate" scope is created for the
directive's template. The 'isolate' scope differs from normal scope in
that it does not prototypically inherit from its parent scope. This is
useful when creating reusable components, which should not
accidentally read or modify data in the parent scope. Note that an
isolate scope directive without a template or templateUrl will not
apply the isolate scope to its children elements.
Edit Like #itamar mentioned in his comment :
When I use scope:true it seems that it does keep the id in the directive (checked with going to the dom element and printing the scope). However, open() from the tansclusion point doesn't work now, along with any other bindings in the template.
The answer (from angularjs doc ) is :
The 'isolate' scope object hash defines a set of local scope properties derived from attributes on the directive's element. These local properties are useful for aliasing values for templates. The keys in the object hash map to the name of the property on the isolate scope; the values define how the property is bound to the parent scope, via matching attributes on the directive's element:
# or #attr - bind a local scope property to the value of DOM attribute.
= or =attr - set up a bidirectional binding between a local scope property and an expression passed via the attribute attr. The expression is evaluated in the context of the parent scope.
< or < attr - set up a one-way (one-directional) binding between a local scope property and an expression passed via the attribute attr. The expression is evaluated in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name.
& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name.
I am reading ng-book-r27.
There are some something i can't understand well.
About 'Scope Option' of The chapter 'Directives Explained'.
First confusion:
If multiple directives on an element provide an isolate scope, only
one new scope is applied. Root elements within the template of a
directive always get a new scope; thus, for those objects, scope is
set to true by default.
I think that mean other directives will use the isolate scope as theirs.
is that right?
Second confusion:
example of inherited scope
ng-init has higher priority than custom directive.
Why the expression of ng-init will use the scope of custom dirctive.
I find a recommendation from offical doc about ng-init:
This directive can be abused to add unnecessary amounts of logic into
your templates. There are only a few appropriate uses of ngInit, such
as for aliasing special properties of ngRepeat, as seen in the demo
below; and for injecting data via server side scripting. Besides these
few cases, you should use controllers rather than ngInit to initialize
values on a scope.
OK, I can ignore the strange behavior of second confusion.
I have not read the book ng-book, but as far as I know, the statement of your first confusion does not conform with the AngularJS documentation regarding inherited and isolated scopes within a directive.
The statement above is simply not possible, having multiple directives that each have their own isolated scope would produce a $compile:multidir error. Here is a DEMO.
.directive('elem1', function($rootScope) {
return {
restrict: 'A',
scope: {}
};
})
.directive('elem2', function() {
return {
restrict: 'A',
scope: {}
}
});
After scanning the AngularJS documentation, there is no supporting statement that validates the statement:
If multiple directives on an element provide an isolate scope, only
one new scope is applied.
The closest statement I see that is similar to the statement above is the scope: true option definition when creating directives:
true: A new child scope that prototypically inherits from its parent
will be created for the directive's element. If multiple directives on
the same element request a new scope, only one new scope is created.
The new scope rule does not apply for the root of the template since
the root of the template always gets a new scope.
The statement above suggests that when multiple directives with scope: true option (not an isolated scope) resides in a single element, it would create one scope and everything else is a shared scope. DEMO
.directive('elem1', function($rootScope) {
return {
restrict: 'A',
scope: true,
link: function(scope) {
console.log(scope.hello);
}
};
})
.directive('elem2', function() {
return {
restrict: 'A',
scope: true,
link: function(scope) {
scope.hello = 'world';
console.log(scope.hello);
}
}
});
You would notice that both directives logs 'world', this obviously supports the statement above.
If you read more in the $compile scope AngularJS documentation, you would see that:
In general it's possible to apply more than one directive to one
element, but there might be limitations depending on the type of scope
required by the directives. The following points will help explain
these limitations. For simplicity only two directives are taken into
account, but it is also applicable for several directives:
no scope + no scope => Two directives which don't require their own scope will use their parent's scope
child scope + no scope => Both directives will share one single child scope
child scope + child scope => Both directives will share one single child scope
isolated scope + no scope => The isolated directive will use it's own created isolated scope. The other directive will use its parent's scope
isolated scope + child scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.
isolated scope + isolated scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.
Perhaps you're having problems identifying the difference between prototypically inherted scopes and isolated scopes. You might want to read the $rootScope.Scope $new() method, the isolate parameter definition.
First question:
I think that mean other directives will use the isolate scope as
theirs. is that right?
The answer is an absolute no, in reference towards multiple directives with isolated scope, it would produce the $copile:multidir error.
For your second question:
ng-init has higher priority than custom directive. Why the expression
of ng-init will use the scope of custom directive?
As for directives that do not have isolated scopes or directives that don't prototypically inherit from their parent scope, you can directly associate those directives as having a scope property definition with a falsey scope value:
falsy: No scope will be created for the directive. The directive will
use its parent's scope
If a directive is bound to an element with a scope of its own then it simply uses the scope of that element, otherwise it seeks all the scope instances within the scope chain until it reaches the $rootScope.
I have two custom directives, one is a child of the other. For simplicity let's call them 'outer' and 'inner'. The inner requires the outer and has an isolate scope like this.
require:'^outer',
restrict: 'EA',
scope: {
disabled: '#'
},
The outer also has an isolate scope and also has an attribute binding to 'disabled'
What I am trying to do inside the inner's link function is check to see if the value of disabled is true, if it is not set then I would like to use the outer directive's disabled value which I will default to false.
Should this just be automatic, e.g. the attribute binding will bind to the attribute OR the parent scope if the attribute is not supplied, or do I have to use something like $parent to access outer's scope?
If you set scope: true then your inner directive will get a scope that's prototypically inherited from its parent, so that should give you access to the properties on the parent scope.
Goal: create an isolate-scoped directive that, when applied to an input element with an existing ng-model directive, constrains the value of the model arbitrarily, reflecting the changes back to the parent scope. Do all of this with "controller-as" naming.
For example, this template represents a possible use of the aforementioned directive, assuming the containing controller is outerCtrl:
<input ng-model="outerCtrl.value" my-directive>
Where the following represents a portion of the definition for myDirective (absent the functional pieces, which are represented as comments and are the actual question at hand):
angular.module('app').directive('myDirective', [function() {
return {
restrict: 'A',
scope: {},
require: 'ngModel',
controllerAs: 'myCtrl',
bindToController: true,
controller: controller: [function() {
var vm = this;
vm.magicValue = 'foo';
}],
// ----------
// Insert appropriate compile, link, etc. to ensure that if
// the user ever types the "magic value" in the input, then
// the parent model (outerCtrl.value) is set with the magic
// value; otherwise, the value set on the parent model should
// be "null" or "undefined." And, of course, if there is ever
// a programmatic setting of outerCtrl.value, that should be
// reflected down to the input while obeying the same rule -
// i.e., if some value other than the magic value is set, it
// should be ignored.
//
// Of critical importance: there may be other directives
// operating on the same ng-model within the isolate scope
// (or, rather, as child scopes of the isolate scope).
// These other directives should work in concert with
// myDirective. For example, one such directive might be a
// "typeahead" directive that manipulates the model based on
// selection from a dropdown list. This behavior can't be
// trampled by myDirective.
// ----------
};
}]);
My primary motivation in using isolate scope is to ensure that the directive is reusable. And my motivation in not using a wrapper div or other element to contain an input in the directive's template is to make it easier to use the directive on any existing input element, thereby also taking advantage of ng-model validation that might already be working in the parent scope.
Is this possible? More importantly, should I even be attempting this, or is it a misuse of ng-model/isolate scopes/directives per the intentions of the framework designers?
I have directive in which I have scope mentioned as :
return {
restrict: 'AE',
transclude: true,
scope: {
model: '=',
menu: '='
},}
so my question is apart from model and menu variables what all variables are accessible to me? Does Isolated scope inherits parent scope variables ?
If I don't want to use isolated scope then what could be done where I can set these two variables in directives and inherits all variables from parent scope ?
Thank you.
If I understood correctly, what you want to achieve is a new scope inheriting all the parent stuff. That is easy to do.
By default a directive uses the parent scope, but you can do two different things:
scope: {} // Isolated scope
or:
scope: true // new scope inheriting from parent
So with the later, you will have all the parent scope has but you can set new stuff there and the parent won't know. Example:
http://plnkr.co/edit/oL5ALPvkEzkiXSuOSNnE?p=preview
I hope this is what you asked for.
EDIT: I edited the plunker. The idea with new scopes that inherits from others is:
If parent has a primitive like name the child will inherit it, but if you do something like:
childScope.name = ".." you are not modifying the parent name, you are shadowing it, AKA creating a new name that will hide the parent name. this means that the parent will never know if the child modified the name.
foo is something created in the new child scope, that means that the parent will never know.
user is not a primitive, it is an object and when the child modifies its name, it is not shadowing the entire user, it is just modifying its value:
childScope.user.name = "Fox"
This is getting the user reference and modifying its value, is not modifying the entire user, so you are not shadowing it. If you do:
childScope.user = { name: 'Foo' };
Then you're creating an entire user, AKA you're creating a new reference so that will shadow the parent user and the parent-child relationship of that object will end.
This is what we call the dot rule.
If the scope property of the directive definition is set to an { /* object hash */ } an isolated scope is created for your directive. If you set the scope property to true a new scope is generated that inherits from the parent scope.
See this plunker for a demo on directive scope behaviour.
If you don't want to isolate the scope but do want to pass argument to the directive you can use the $observe method of the attributes service.
function linkingFn(scope, elm, attrs, ctrl) {
// get the attribute value
console.log(attrs.ngModel);
// change the attribute
attrs.$set('ngModel', 'new value');
// observe changes to interpolated attribute
attrs.$observe('ngModel', function(value) {
console.log('ngModel has changed value to ' + value);
});
}
Creating a two way binding without an isolated scope can be done with the $parse service.
when you set scope like this, it's an isolated scope, and as its name says, it doesn't inherit any property from parent scope.
However, you can directly define variable on the scope, in the directive link method, like this:
.directive('someDirective', function(){
return {
restrict: 'C',
link: function(scope, element, attrs){
scope.newVariable = "newVariable"
}
}
}
it adds newVariable to your scope.Hope it helps~
More info on directive can be seen here, http://docs.angularjs.org/guide/directive. There is a section with the name Creating a Directive that Manipulates the DOM