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
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 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...
See this plnkr
https://plnkr.co/edit/theggRtJlbFj1H4zVUKU?p=preview
using the $compile service, I need to have dirC nested inside dirB.
The output should be
DirB
DirC
I thought this was bug since dirC directive and controller was never fired, so the Angular group said to use transclusion.
Ok, so I use transclusion and dirC and dirB is never added to the DOM.
What am I missing?
The directive C is included inside the directive B. But the only visible text in both templates is inside the div which has the directive ng-transclude. So the textual content is replaced by the transcluded HTML: the directive C in the case if <dir-b>, and nothing in the case of <dir-c>.
Here's your example with fixed templates to show you that it works fine: https://plnkr.co/edit/FRtMA3h0Caredc4staW8?p=preview
Like ng-view, ng-transclude is a placeholder which means: replace the content of this element by the one inside the body of the directive.
I'm new to Angular JS. In my plunkr, I have a typeahead that works when I have the typeahead in the html markup. However, when I dynamically generate the html inside my directive, the typeahead no longer works.
Code Here:
http://plnkr.co/edit/KdrxptYAnpTmKa7ZuKkM?p=preview
and to take it one step further, when I pass in a function, it still does not work:
http://plnkr.co/edit/jqN913hJxuVSFAZxAQt7?p=preview
It is not a trivial problem you are trying to solve here, I'm afraid. Basically you are bumping into the scoping issue. The typeahead directive evaluates it expression (city for city in cities($viewValue) here) in the scope of the DOM element on which it is placed. The way you written your wrapper directive makes it so the expression is evaluated in the directive's scope which is isolated and doesn't "see" your controllers scope.
The are number of ways around it but probably the simplest one is to link your $compiled-ed element in the scope that is $parent of your directive scope:
var linkedInput = $compile(inputHtml)(scope.$parent);
Here is a working plunk: http://plnkr.co/edit/fLFwIKNqIRbnesMjZBGj?p=preview
The other alternative is to loose an isolated scope and "manually" take care of the 2-way data binding with the help from the $parse service.
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.