I have create a custom directive that displays the directive template within the current view:
<div class="upper-outfits-layer" ng-show="outfitExpanded">
<expanded-outfit outfit="outfits[currentOutfit]"></expanded-outfit>
</div>
That will display an html template. The view this directive is placed within, has its own controller. I need to access the views scope variables from this directive and vice versa.
Is it possible to access a sperate controller from a custom directive?
Do not use isolated scope in your directive. You can directly get access your view scope.
(In case of Isolated scope) Pass the variables in the attribute of your directive. They will be accessible to your directive through your isolated scope.
(In case of Isolated scope) Use scope.$parent in your directive to access view scope.
If you don't isolate the directive's scope using scope:{}, you should be able to access parent controller's variables. Maybe add the directive code to your question if the problem persists...
Related
I've had no success creating an Attribute directive that uses vm in the child elements and uses the directive controller scope and no it's parent scope.
See: http://fiddle.jshell.net/vzuf9psq/
How can I make the second message show the message from the directive controller?
Use directive scope to transfer properties from one controller to another
Use bindToController to bind directive scope to controller (or much better, use Angular component's syntax).
Do not paste template inside directive tag (or use transclude for this purpose)
See Final fiddle
I was trying to understand scope in angularjs.
Say while registering a directive in angularjs if we dont provide any scope as the property of the object, what is the scope of the object then?
For example consider the following code:-
app.directive("kid", function() {
return {
restrict: "E",
template: '<input type="text" ng-model="chore"> {{chore}}'
};
});
Now say if i have 2 elements in my html:-
<kid></kid>
<kid></kid>
So how do above end up sharing the same scope? I am not able to find convincing answer yet.
Yes, As you didn't declared any scope option of directive, it will share the same scope.
Here is Demo Plunkr
Now come to the point, what is scope object?
scope object in Angular is nothing having context information and that will available on html, can also be utilized to provide two way binding. Basically scope is binded with some controller.
When things comes to directive scope, if you didn't mention scope property inside directive, that means directive shares the scope of the controller where the directive element has been placed.
To make them treated as a different scope for each directive you could create an an directive with an isolated scope, which can be defined using scope: {} inside a directive, when you define a scope: {} inside a directive, it creates an isolated child scope which is not prototypically inherited from the parent scope using $scope.$new(true) method.
Plunkr with isolated scope
Your question is about scope inheritance and isolate scope.
If you do declare a scope property on a directive object then the directive has its own isolate scope.
If you don't declare a scope property on your directive object the directive inherits the scope of the scope it was instantiated in.
So with your definition of the kid directive that doesn't declare an isolate scope the kid directives in the code example below both inherit the scope of the controller that they are instantiated in.
<div ng-controller="myCtrl">
<kid></kid>
<kid></kid>
</div>
Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.
Scope characteristics
Scopes provide APIs ($watch) toenter image description here observe model mutations.
Scopes provide APIs ($apply) to propagate any model changes through
the system into the view from outside of the “Angular realm”
(controllers, services, Angular event handlers).
Scopes provide context against which expressions are evaluated.
For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.Scope is the glue between application controller and the view.
When you attach any controller to DOM node, for example,
<div ng-controller="myController">{{testProperty}}</div>
controller scope will be associated with this DOM node.
Imagine another example. We created directive myDirective, which has its own isolated scope. Now we have
<div ng-controller="myController" myDirective>{{testProperty}}</div>
Which scope will be associated with DOM node in this case? Scope of controller or directive? And last example, we have one more directive mySecondDirective with its own isolated
scope
<div myDirective mySecondDirective>{{testProperty}}</div>
Which scope will be associated with DOM node in this case? Scope of myDirective or mySecondDirective? And can you explain why?
<div myDirective mySecondDirective>{{testProperty}}</div>
for multiple directives defined on a single DOM element, you can explicitly define a priority: - see this: https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object
<div ng-controller="myController" myDirective>{{testProperty}}</div>
Which scope will be associated with DOM node in this case? Scope of
controller or directive?
for controller's $scope and a directive's scope defined on a single DOM element: "The transclude option changes the way scopes are nested. It makes it so that the contents of a transcluded directive have whatever scope is outside the directive, rather than whatever scope is on the inside. In doing so, it gives the contents access to the outside scope." from the angularjs docs found here: https://docs.angularjs.org/guide/directive#creating-a-directive-that-wraps-other-elements
Thanks, but all of you are wrong. As I found out it is not possible to create two or more scopes on one DOM node. Angular throws this error:
Error: [$compile:multidir] Multiple directives [pTest2, pTest] asking for new/isolated scope on: <p-test p-test2="">
I have been working a while in angular directive, for now, I came out with a problem.
What is the different between module.controller and the controller that could be defined in directive?
angular.module().controller()
angular.module().directive(function(){
return {
controller:
}
});
The definition of both of them seems the same.
Another question is, would I assign the controller that defined by angular.module().controller() for directive controller?
Basically the functionality of both these controllers is essentially the same except that there is difference in the scope they act upon. Scope of the controller defined by the directive only applies to the element & children of that element, where the directive has been applied. Whereas controllers defined by the module act on scope of all elements where controller is defined with ng-controller.
Directive can also make use of the controller defined by angular.module(). This is achieved using controller key in the directive and providing the name of the module controller as a string.
Have a look at this example.
Module controllers are used to initialize scope on the hosting page. The scope on the hosting page relies on prototypical scope inheritance in a parent-child relationship.
Directive controllers are used to initialize scope for the directive's scope, which can be one of two types:
1. Isolated scope
2. Child scope (prototypical)
They are similar in that both kinds of controllers are used for initialization of scope. They are different in that each initialize their respective scopes: module controllers initialize page scope, directive controllers initialize the directive's scope.
The logic within a module controller is usually application specific but the logic within a directive controller is usually application-agnostic. Directive's are intended to be reusable, but application controllers are not.
What does the scope parameter in the link property of the directive definition object represent. Is it the scope that the directive will be used in or is it an isolated scope for every time the directive is used?
If you do not define scope in your directive then it has access to your parent scope. If you define it as
scope: {}
Then an isolate scope is created.
Should be able to see more in the docs, but that is a basic rundown.
https://docs.angularjs.org/guide/directive