Question

我是角度js的新手，我尝试了一些示例代码。我正在尝试一些东西，但它不起作用。以下示例代码将为您提供更多详细信息。

Html代码

<body  ng-app="myApp" ng-controller="testController">
        <div repeat-hello-world="{{repeat}}">
            <button ng-repeat="i in [1,2,3]">{{i}}</button>
        </div>
</body>

Angular JS代码

'use strict';

angular.module('myApp.directives', [])
    .directive('repeatHelloWorld', ['$timeout', function (timer) {
    return {
        compile: function(element, attributes) {             
            var hello = function(){                 
                 var nodes = element.children();
                console.log(nodes.length);
                 for(var i=0; i<nodes.length; ++i){                 
                  console.log(i);    
                  angular.element(nodes[i]).attr('data-alert',i);   // This is not working
              }           
            }

            element.ready(function(){
                  hello();  
            });

            var nodes = element.children();
              for(var i=0; i<nodes.length; ++i){
                  console.log(nodes.length);
                  console.log(i);
                  angular.element(nodes[i]).attr('data-alert',i);
              }           
        }
    }
}]);
// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['myApp.directives']);

/* Controllers */
function testController($scope) {
    $scope.repeat = 5;
}

myApp.directive("alert", function(){     
    return function(scope, element, attrs){

        attrs.$observe(attrs.alert , function(newValue){
            console.log('newval' + newValue);
        });
        element.bind("click", function(){
            console.log(attrs.alert);           
        });
    };
});

您可以看到一行＆＃34;这不起作用＆＃34;。当我尝试更改值数据警报（这是属性指令）但它始终显示0.我也尝试观察值的变化，但它不能正常工作。

小提琴：http://jsfiddle.net/U7N9n/2/

Answer 1

问题在于，在呈现ng-repeat之后，您依赖于添加警报属性（意味着在$ digest阶段之后）。到那时为时已晚 - 您错过了修改DOM的机会，以便他们能够正确编译和链接。

解决此问题的方法是将ng-repeat放在父元素中，然后声明性地添加警告＆＃39;属性：

<div repeat-hello-world="{{repeat}}"> <span ng-repeat="i in [1,2,3]"> <button data-alert="{{i}}">{{i}}</button> </span> </div>

Here is a Working Fiddle

更新属性指令值

1 个答案: