Question

我对Angular很新，作为练习，我正在建立一个小网站。在其中一个页面上，我希望能够显示数据绑定所点击的按钮数量。为此，我有这个控制器

'use strict';

angular.module('angularApp')
    .controller('MyCtrl', function ($scope) {
    var timer = 0;

    $scope.clicked = function () {
        timer++;
        console.log(timer);
        return timer;
    };

    $scope.actualTime = $scope.clicked(timer);
});

至于观点，我有：

<button type="submit" ng-click="clicked()" class="btn btn-success">Start</button>
    <p>You clicked {{actualTime}} minutes ago.</p>

控制器通过$ routeProvider绑定到视图。

理想情况下，每当我点击按钮时，{{actualTime}}值都应递增。但它并不是出于某种原因。据我所知，它应该绑定（如在双向数据绑定中），因此不应该是一个将更新DOM的函数。 console.log以正确的增量更新，但DOM没有。有谁想解释这是如何工作的？我在这里阅读了答案，大多数（如果不是全部的话）都是技术性的。一个愚蠢的解释真的会有所帮助。谢谢！

Answer 1

在您的代码中，您没有更新变量＆＃39; actualTime＆＃39;每次点击都会。

您可以通过两种方式更新变量

1）您可以在被调用函数

中为每次点击更新它

http://plnkr.co/edit/o8Jq5jQn0DEg0mN2r7Zd

HTML

<button type="submit" ng-click="clicked()" class="btn btn-success">
Click      
</button>
<p>You clicked {{actualTime}} minutes ago.</p>

JS

var timer=0;
$scope.actualTime = 0;
$scope.clicked = function () {
    timer++;
    $scope.actualTime = timer;
};

2）您也可以使用＆＃39; $ watch＆＃39;更新它。还

HTML

<p>Using $watch service  : You clicked {{actualTime2}} minutes ago.</p>

JS

如果你有一个变量＆＃39; $ scope.actualTime＆＃39;定义，然后当变量＆＃39; $ scope.actualTime＆＃39;更改，将其新值分配给＆＃39; $ scope.actualTime2＆＃39;

$scope.$watch('actualTime',function(newval, oldval){
  $scope.actualTime2 = newval;
})

AngularJS - $ scope不绑定到DOM

1 个答案: