Question

我试图在anguar.js中制作一些测试应用程序，但遇到了问题。我的js文件包含：

live = angular.module('live',[]);
live.controller('printCtrl', function() {
        this.test = [];
        var thizzz = this;

        this.getTest = function() {
            return this.test;
        };

        setInterval(function() {
            thizzz.test.push(Date.now());
        }, 1000);
   }
);

我的html文件包含：

<div class="content" ng-app="live">
    <div ng-controller="printCtrl as print">
        <div ng-repeat="t in print.getTest()">
             {{t}}
        </div>
    </div>
</div>

但我什么也看不见。为什么呢？

-------------更新---------------

我改变了我的js文件：

live = angular.module('live',[]);
live.controller('printCtrl', function() {
        this.test = [1, 2, 3];
        var thizzz = this;

        this.getTest = function() {
            console.log('INSIDE');
            return this.test;
        };

        setInterval(function() {
            thizzz.test.push(Date.now());
        }, 1000);
   }
);

和html没有任何变化。

我没有在HTML文件中看到任何想法，但我在控制台中看到，如何将角度调用2次getTest函数。

Answer 1

如果我们在AngularJS应用程序中使用setInterval或setTimeout，我们还需要使用$ scope。$ apply（）来确保对范围的任何更改都会反映在其他地方（即数据绑定）在视图中）。

AngularJS为此提供了一个方便的包装：$ timeout（） - 它为我们执行$ apply（）调用，所以我们没有。

$interval(function () {
    thizzz.test.push(Date.now());
}, 1000);

请参阅演示：http://jsfiddle.net/VPVF6/

Answer 2

首先需要初始化变量以获取列表，然后使用该范围变量

<div class="content" ng-app="live">
    <div ng-controller="printCtrl as print" ng-init="printList=getTest()">
        <div ng-repeat="t in printList">
             {{t}}
        </div>
    </div>
</div>

控制器必须具有$ interval服务，因此不需要$ apply

$interval(function() {
    $scope.test.push(Date.now());
 }, 1000);

Answer 3

请参见此处：http://jsbin.com/munal/2/edit

<div ng-controller="printCtrl" ng-init="printList=getTest()">

    <div ng-repeat="t in test">
         {{t}}
    </div>
</div>

  </div>

JS：

app.controller('printCtrl', function($scope){

        $scope.test = [];


        this.getTest = function() {
            return this.test;
        };

        setInterval(function() {
           $scope.test.push(Date.now());
          $scope.$apply();
        }, 1000);
});

Angularjs ng-repeat with new element

3 个答案: