AngularJS如何编译指令？

我想更好地理解AngularJS如何编译指令并更新视图。AngularJS如何编译指令？

这是我的具体问题。我有一个指令，像这样：

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*/ 
     } 
    } 
});

在点1 scope.foo.id为defined。但是，该指令的模板尚未编译，因此div ID未设置，并且getElementById返回null。一旦页面完全呈现，并且我查看编译后的模板，所有模板ID都已成功设置为foo.id

我在这里丢失了什么？

重要的是要注意，对于我的特殊情况，我需要通过它的id明确地与模板div进行交互。

编辑：增加了一个小提琴：http://jsfiddle.net/6c4nb/8/

来源

2014-03-28 Dan

问题，它说你需要与模板互动，你想用这个模板做的任何细节？ – Pete

我试图初始化一个插件，明确需要传入元素ID的元素。 – Dan

你可以把它扔进小提琴吗？如果没有html和完整的js，你很难完全理解你在做什么。 –

好了，在有限的信息，我能得到你的工作的元素。我不完全确定你想要做什么，但是你需要在指令中设置元素的id。

如果有更好理解的人可以解释，我想知道为什么id没有被绑定到模板中。看来，如果你从指令中设置ID，它会正常工作。（jsfiddle）

@丹我还必须更改您的ID以使用前面的单词test-，因为HTML规范不允许ID以数字值开头。根据规格：

ID和名称标记必须以字母（[A-Za-z]）开头，后面可以跟随任意数量的字母，数字（[0-9]），连字符（ “ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

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 */ 
       } 
      } 
     } 
    }; 
});

来源

2014-03-28 16:21:14 Pete

Foo在控制器上定义，我用'scope：{foo ='='}'在指令的作用域上定义它。我只是试图访问它，所以我可以对元素进行一些DOM操作。 – Dan

难道你只是使用元素变量修改DOM？任何机会，你可以得到一个jsfiddle说明你想要什么？ – Pete

请参阅我上面提出的评论。我需要id字符串，并且该元素需要在那个时候编译。 – Dan

AngularJS如何编译指令？

回答

相关问题