How does AngularJS compile directives?

Question

I'm trying to get a better understanding how AngularJS compiles directives and updates the view.

Here's my specific problem. I have a directive like so:

angular.module('directives', [])

.directive('test', function() {
   return {
      restrict: 'AE',
      scope : { foo : '=' }, 
      template: '<div id={{foo.id}}>{{foo.data}}</div>'
      link: function(scope, element, attrs) {
          document.getElementById(scope.foo.id); /*1*/
      }
    }
 });

At point 1 scope.foo.id is defined. However, the template for the directive has not been compiled yet, so the div id is not set, and getElementById returns null. Once the page is completely rendered, and I look at the compiled template, all of the template id's have been successfully set to foo.id

What am I missing here?

It's also important to note that for my particular case I need to explicitly interact with the template div by it's id.

EDIT: added a fiddle : http://jsfiddle.net/6c4nb/8/

Question, it says you need to interact with the template, any details on what you want to do with that template? — Pete
– Pete, Commented Mar 28, 2014 at 16:25
I'm trying to initialize a plugin on the element that explicitly needs the element id to be passed into it. — Dan
– Dan, Commented Mar 28, 2014 at 16:28
Can you throw this into a fiddle? It is hard to understand exactly what you are doing without the html and full js. — Zack Argyle
– Zack Argyle, Commented Mar 28, 2014 at 16:32
Can you provide me with the HTML for your plugin? Essentially, what you do is use element.html( {{ your plugin goes here }} ); then execute a $compile(element.contents())(scope); — Pete
– Pete, Commented Mar 28, 2014 at 16:32

Pete · Accepted Answer · 2014-03-28 17:44:44Z

3

Ok, given the limited information, I was able to get the element working for you. I'm not exactly sure what you want to do, but you need to set the id of the element within the directive.

If someone with better understanding can explain, I'd like to know why the id doesn't get bound within the template. It appears that if you set the id from the directive, it works fine. (jsfiddle)

@Dan I also had to change your ID to use the word test- in front of it because the HTML spec does not allow id's to start with numerical values. According to the spec:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

var testApp = angular.module('testApp',[]);

testApp.controller('mainCtrl', ['$scope', function($scope) {
    $scope.bar = [
        { id: 1, msg: 'this is a nice message'}, 
        { id: 2, msg: 'this message is also nice'}, 
        { id: 3, msg: 'yet another message'}
    ];
}]); 

testApp.directive('plugin', function() {
    return {
        restrict : 'EA', 
        template: '<div>{{foo.msg}}</div>',
        scope: {'foo': '='},
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                post: function postLink(scope, element, iAttrs, controller) {
                    element.attr('id', 'test-' + scope.foo.id);
                    console.log(document.getElementById('test-' + scope.foo.id));
                    /* This does not provide a null value */
                }
            }
        }
    };
});

edited Mar 28, 2014 at 17:44

answered Mar 28, 2014 at 16:21

Pete

3,2644 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dan Over a year ago

Foo is defined on a controller, and I'm defining it on the scope of the directive with scope: {foo = '='}. I'm just trying to access it so I can do some DOM manipulation on the element.

Pete Over a year ago

Couldn't you just modify the DOM using the element variable? Any chance you could get a jsfiddle illustrating what you want?

Dan Over a year ago

Refer to the comment I made above. I need the id string, and the element needs to be compiled at that time.

Pete Over a year ago

Make sure you understand the scope setting for directives. You'll need the understand when to set scope to false/true/or {}. See the link in the answer.

Dan Over a year ago

I'm explicitly trying to isolate the scope... I don't want scope: false

|

Collectives™ on Stack Overflow

How does AngularJS compile directives?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related