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
Related
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...
I'd like to access a function from the parent => parent controller inside my directive (with the controllerAs notation). I'm using angular 1.3.14
I have the following structure:
Controller (with save function)
(Child) controller
Directive with a template (and isolated scope). Inside this template I have a button which should call the save function from the parent (parent) controller.
I don't want to call $scope.$parent.$parent.save(...)
Does anyone has an idea?
Thanks in advance.
Use just $scope.save().
In Angular there is scope hierarchy and by calling $scope.save() directive will look in directive's scope, if there is no save() method, it will look in parent's scope and so on.
One condition is to don't have isolated scope for directive.
There is no good way to do this other than passing the desired function into the directive. This is what using & in an isolated scope declaration is for.
https://docs.angularjs.org/guide/directive
Of course there are easier ways if the function is just a utility function. You could just register a filter. But if you want the child directive to alter the state of the parent controller at some event then using & is the best solution.
If you need the child directive to pass arguments to the function that is being passed to it then you are going to need to use the feature associated with this sentence in the above documentation:
This is specified in the directive by calling close({message: 'closing
for now'}). Then the local variable message will be available within
the on-close expression.
I'm creating a test directive as can be seen here:
http://jsbin.com/xosusozipufe/1/
This isn't behaving as expected. I thought the h4 within the directive div would read 'within the app Hello World' on load and then the end would change as the buttons were clicked. The html nested within the directive div doesn't inherit the isolate scope of the directive, is this correct?
Any thoughts appreciated
C
# isolated scope is one way and works in up-down fashion that means whatever you pass that will go as string so you can not update from scope of directive.
Either you should use transclude or put html of directive inside template/templateUrl option.
If you want update from directive scope then either you can use "=" isolated scope or you can pass function with "&" isolated scope.
JSBin Demo
I have a MainController and a nested Directive. I'm looking at this example to see how the communication works between controllers and directive, but mine doesn't seems to work.
Basically, I want to call a main controller scope function from a custom directive (button empty cart). See the plunkr example below.
Plukr: http://plnkr.co/edit/82STLkKxBK6htTnmnqlu?p=preview
Whenever I do console.log(scope.$apply("emptyCart()")), it's undefined for some reason.
Note: I'm trying to avoid $rootScope.broadcast as much as possible...
You're using isolate scope for the parent directive, so the child directive does not have access to the scope of the controller.
In order to provide the child directive with access to that scope function while maintaining isolation of the parent, you can add that function as a scope: { ... } property on the parent directive:
scope: {
...
emptyCart: '='
}
and set the function name to the corresponding attribute on the parent directive's view declaration:
<div ... data-show="showPopup" empty-cart="emptyCart"></div>
Then you can skip all of the workarounds you've attempted to employ in your Plunker, and just set an ng-click on the child directive in order to fire the controller function:
sHTML = "<button ... ng-click='emptyCart()'>Empty cart</button>";
Demo
Before posting this fiddle, i checked SO for similar question. Got few answer but all those were not form elements. http://jsfiddle.net/dgQAd/
I have the following questions:
1) The textbox is bound to a model uname, but onload the textbox is not displaying the value. why this is happening?
2)while searching for answers for this, i saw something like require:ngModel, and injecting a controller inside the linking function, how can i use this injected controller inside the linking function of the directive.
3)How to look for the changes in the parent scope ng-model from inside a linking function of an isolate scope directive.
The only way I've been able to get ng-model to work with an isolate scope is to use the same name for the isolate scope property: scope:{ "uname":"=ngModel" }. Your $watch will now work.
For more on this see also https://stackoverflow.com/a/14792601/215945
When a directive requires another directive's controller, that controller is available as the 4th option to the linking function. In your fiddle, that is what you called ngModel:
link:function(scope,el,attrs,ngModel){
Normally, I prefer to name this ngModelCtrl to remind me that it is a controller.
$observe is only used with isolate scope properties that use the '#' syntax.