AngularJS

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

在您的代码中，您不会在每次点击时更新变量 'actualTime'。

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

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) 您也可以使用“$watch”更新它。

HTML

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

JS

如果您定义了变量“$scope.actualTime”，那么每当变量“$scope.actualTime”发生变化时，将其新值赋给“$scope.actualTime2”

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

AngularJS - $scope 没有绑定到 DOM

AngularJS - $scope does not bind to DOM

javascript

scope