3

我在AngularJS中盯着我的方式。

我创建了一个自定义指令：

app.directive('myScroll',function(){
return {
    restrict: 'A',
    transclude: true,

    template: '<div ng-transclude></div>',
    link: function(scope , element , attrs) {

    element.addClass('scroll-pane');

    scope.$watch('tasks', function(newval, oldval){
          if ( newval  ) 
          {

            console.log(newval);
            console.log(newval.length);
        }

    });

        console.log("afer watch exper");
        console.log (tasks);



    }


  };

});

使用以下 HTML：

<div my-scroll>
        <ul>
            <li data-ng-repeat="task in tasks" class="task-wrapper">
                <div class="task-element">
                    <div class="name">{{task.name}}</div>
                    <div class="text">{{task.action}}</div>
                </div>
            </li>
        </ul>
    </div>

任务对象通过控制器调用的服务进行评估（如有必要，我将发布其代码）。

在指令代码中，任务对象是未定义的，因为我必须获得任务长度才能执行更多的 css 命令，所以我必须等待 ng-repeat 完成或等待任务变量将被评估。

由于某种原因，任务在 $watch 语句的外部和内部总是未定义。我可以在控制台中看到，首先打印“watch exper 之后”，然后是“in watch”，但仍然没有值。newval 对象具有 [move2:function] 但它的长度属性一直返回 0 但它保留了我的任务的资源数组。

我在这里缺少什么以及在评估任务变量时如何执行命令？

感谢帮手。

4

2 回答 2

11

您应该使用scope.tasks来引用数据。

app = angular.module('myApp', []);
app.directive('myScroll', function () {
    return {
        restrict: 'A',
        transclude: true,

        template: '<div ng-transclude></div>',
        link: function (scope, element, attrs) {

            element.addClass('scroll-pane');

            scope.$watch('tasks', function (newval, oldval) {
                if (newval) {
                    console.log(newval);
                    console.log(newval.length);
                }
            });
            console.log("afer watch exper");
            console.log(scope.tasks); //this will log the actual data.
        }
    };
});

function Ctrl($scope) {
    $scope.tasks = [{
        name: "task1",
        action: "action1"
    }]
}
于 2013-07-26T13:28:15.143 回答
5

尝试将第三个参数 - true传递给 $watch：

scope.$watch('tasks', function(newval, oldval){
    if(newval){
        console.log(newval);
        console.log(newval.length);
    }
},true);
于 2013-07-26T13:39:28.050 回答