Firstly I'm really sorry if the following questions sound stupid. I know there are documentations but there is not enough example and I'm quite new with it.
I tried to create a directive that might make use of ng-repeat
However it seems like that when the directive is linked, ng-repeat hasn't been evaluated at all. So whenever I tried to call the jQuery function inside the postlink function, the jQuery wouldn't work.
<div my-directive>
<div ng-repeat="image in images">
<img ng-src="image">
</div>
</div>
The scope contains something like this:
scope.images = ['http://placehold.it/100x100', 'http://placehold.it/100x100'];
In the directive I had roughly like the following:
angular.module('mymodule', []).directive('myDirective', function factory() {
return {
restrict: 'A',
compile: function (tElement, tAttrs, transclude) {
// #1
return {
pre: function preLink(scope, iElement, iAttrs, transclude) {
// #2
},
post: function postLink (scope, iElement, iAttrs, controller) {
// #3
}
};
},
link: function postLink(scope, iElement, iAttrs) {
// jQuery code to convert the element
// #4
}
};
});
In addition, what's the difference between putting the code on #1, #2, #3 and #4 above? What's the rule of thumb here?
Where to put a code like probably jQueryUI's $( "#datepicker" ).datepicker();? Since from what I understand there, the function will manipulate (transform) the element and its children.
Thanks.
The main difference between the places (explained here, at Compile function and Linking function chapters), is that the #1 is the compile function. Here you should practice any DOM transformations that, in case of cloning, should be cloned to all elements. This does not apply to Datepicker, as it not only modifies the DOM, but also need to listen events from it. If you add a children element that have a directive, or if you add a directive to a children element, it still gets compiled if you do it here.
The #2 is the preLinking function and will be called after the compilation, but before children linking function. This means that you can't change the DOM, because the next linker iteration will try to find the elements previously index by compilation function and will fail. #3 is the postLinking function and is called after all children were linked, and it's the safest place to apply singular modifications, listen to events and do any neat stuff.
You could also return a function instead of a {pre: , post: } object. In this case, it have the same behavior as #3 (postLinking function). At last, #4 is the same as #3. It's ignored when you have #3.
In case of multiple directives, in the element itself or its children, all compile function will run, than all preLinking functions, then all postLinking functions
Now, to the main question: #3, if you need a compile function. If not, just drop the compile property and goes for #4.
Made a fiddle to illustrate these behaviors.
About the image not loading, you should change <img ng-src="image"> to <img ng-src="{{image}}"> as you need Angular to interpolate the src property.