I'm trying to dynamically load a directive.. something like this:
<div class="{{directive-name}}></div>
or
<!-- directive: {{directive-name}} -->
This doesn't work, because I guess the {{directive-name}} is replaced after angular have checked for the directive.
How can I make this work?
Many thanks in advance
Have a look at $compile function. With that you can actually manually bootstrap a function. With your approach it's already too late.
Related
I have simple tags:
<form show-errors>
<date-input />
</form>
as You can imagine I have two directives: showErrors and dateInput.
showErrors should work on DOM that is loaded by dateInput template but that never happens :(
showErrors runs (DOM is empty) and after that dateInput loads its template but it's way too late. I have impresion that im using directives in wrong way :(
Please take a look at my plunker for details:
http://plnkr.co/edit/3QEd1HvJETo30tZd1zl3
Update:
I updated my plunker and it seams that it's all about lazy loaded template from URL. Any ideas how that should be solved in angular clean way ?
First of all you have a typo in the directive's name: instead of dateinput there should be dateInput.
However, it is impossible to refer to the children from the parent in directives. Only communication in the other direction is allowed (usually using controllers).
You're making two mistakes.
First, your inner directive should be named dateInput:
app.directive('dateInput', function() {
Second, you need to explicitly close the date-input tag.
<date-input></date-input>
It's important to note, that the AngularJS compiler does cannot parse
<date-input />
Following the advise of this answer, I've been trying to render a controller and template manually, but I can't get it to work when the template contains an ng-switch directive. Any ideas?
Here's the fiddle: http://jsfiddle.net/kynZm/
It looks like the ng-switch directive was being compiled before my link function had a chance to run and was linking to the $rootScope. Moving the $compile call to the compile phase of the directive seemed to do the trick.
http://jsfiddle.net/z8uXg/
I want to do something like that, Can it be possible in angularjs
ng-change=\"myDirective = [test]\"
i.e. I simply want to call my directive on ng-change , is it possible in angularjs to call custom directive inside directive.
yes it is possible but for doing this you need another directive for watching changes on your myDirective variable...
when you change value of myDirective middleware directive catches changes and rebuild dom.
I created such a directive for another problem but it can be used in your situation so I edit this PLUNKER for you...
<my-dir ng-show="isVisible()"></my-dir>
isVisible will call isVisible in the controller.
What if I want it to call isVisible inside the my-dir directive instead?
Note: my-dir in my application is a tree control that recursively calls itself using $compile so there may be many of them nested inside each other. Using a singleton service may not work because of asynchronicity.
EDIT: in retrospect I the correct answer was to create a filter for my directive. What can I say, Angular is a different way of doing things.
If you're using a directive you have full control of the element. Just do this: <my-dir check-visible="true"></my-dir>
Then in the directive's link function you can just go: if(attrs.checkVisible) isVisible();
Then you can show or hide the element however you like.
I am unable to call a controller function from inside a custom-template with ui-typeahead:
<input typeahead="val for val in autoComplete($viewValue)"
typeahead-template-url="searchAutocompleteTpl.html"
ng-model="query"/>
<script type="text/ng-template" id="searchAutocompleteTpl.html">
<span ng-repeat="eqp in match.model.equipment"/>
<a href="" ng-click="showItem(eqp.model)">
found in: {{eqp.model}}
</a>
</script>
The problem is that the controller's scope seems to be absent in the template:
showItem(eqp.model)
is never called. I have also tried with:
$parent.showItem(eqp.model)
to no avail.
How can I call a function/value on the controller's scope then?
I ran into the same problem and had a look at the typeahead code on github to see if that might offer any clues. It appears that there are several directives involved in the creation of the suggestions list and each gets its own child scope.
In other words, your $parent.showItem(eqp.model) was a good attempt, but you didn't go up enough levels. What worked for me was: $parent.$parent.$parent.showItem(eqp.model)
I also have same problem. I'm not sure but its working.
You can use double $parent instead of single.
e.g. $parent.$parent.showItem(eqp.model)
The solution of your problem is to initiate an object in your template controller scope like this:
$scope.typeaheadObject = {
query : '',
}
now in your form you will need to change your ng-model with:
ng-model="typeaheadObject.query'
This will create the object typeaheadObject in all your controller if you don't re-initiate it in one of your controller. So when you will want to access to the content of the object in one of this controller you will just have to do for example:
console.log($scope.typeaheadObject.query)
This is a classical issue in angularJs. You only can access and modify a parent scope if the variable is stock in an object
Finally you have to use a '.' in your ng-model. This will permit your ui-bootstrap module and your own module to share their scope with the object.
I just did an example on plunker to be sure you understand well the issue.
http://plnkr.co/edit/4YWNMagm571Gk2DrCERX?p=preview
Have a good day :)
It worked for me after adding 4 parents.
$parent.$parent.$parent.$parent.