Question

我试图更好地了解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/

Answer 1

好的，鉴于信息有限，我能够让元素为你工作。我不确定你想做什么，但你需要在指令中设置元素的id。

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

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

ID和NAME令牌必须以字母（[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 */
                }
            }
        }
    };
});

AngularJS如何编译指令？

1 个答案: