ng-repeat在指令中如果数据发生变化，不会更新。

18 浏览
0 Comments

ng-repeat在指令中如果数据发生变化，不会更新。

我在一个更大的项目中遇到了这个问题，所以我制作了一个最简单的示例。

我有一个控制器，其中包含一些数据。这些数据被传递到指令中，并应该使用原生的ng-repeat进行显示。然而，当指令控制器运行时，它尚未解析angular变量，因此无法渲染重复部分。

我该如何让它工作，以便重复部分可以使用需要预解析的外部变量？

这是一个fiddle。请确保你打开了控制台，因为它会显示函数运行时该变量是未定义的，但在1秒后定义了：http://jsfiddle.net/paulocoelho/xqLAs/2/

这是我的JS代码：

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '
{{x.val}}', // 这无法工作 :(
        scope: {
            sl: '@sl'
        },
        link: function ($scope, $element, $attrs) {
            console.log($attrs.sl);        // 这将返回未定义
            setTimeout(function(){ 
                console.log($attrs.sl);    // 这将返回正确的列表
            },1000);
        }
    };
});
function sweetCtrl($scope){
    $scope.someList = 
    [
        {"val":"a"},
        {"val":"b"},
        {"val":"c"},
        {"val":"d"},
        {"val":"e"},
        {"val":"f"}
    ];
}

这是我的DOM：

    原始列表：{{someList}}
    重复列表：

编辑：

我之前的代码中有一个错误，其中inputdata应该读作sl。

包含解决方案的fiddle在这里：http://jsfiddle.net/paulocoelho/xqLAs/3/

0

1 答案

0 Comments

问题出现的原因是在使用ng-repeat指令时，如果数据发生变化，指令不会自动更新。解决方法是使用'='来传递对象到隔离作用域中。如果使用'@'，则需要使用$attrs.$observe或$scope.$watch()来异步获取值。使用'='则不需要使用$observe或$watch。

具体来说，使用'='来传递对象到隔离作用域时，需要在指令的scope属性中添加sl: '='。同时，在模板中使用ng-repeat指令时，可以直接使用{{x}}来显示对象的值，而不需要使用{{x.val}}。

以下是修改后的代码示例：




template: '
{{x}}
',
scope: {
    sl: '='
},

通过使用'='来传递对象到隔离作用域中，指令将能够正确更新ng-repeat指令中的数据。同时，不再需要使用$attrs.$observe或$scope.$watch来获取值。

希望以上内容能帮助解决你的问题。如果还有其他疑问，请随时提问。

0