更新 dom 不适用于 $watch答案

【问题标题】：update dom not working with $watch更新 dom 不适用于 $watch
【发布时间】：2016-06-23 20:07:11
【问题描述】：

我尝试使用来自 api 的数据更新 dom，但我得到“$watch 未定义”这是我的 ctrl

app.controller('counter', ['$scope', 'factory', function ($scope, factory) {
    factory.get(function (res) {
        $scope.proizvedeno = res;
        $scope.output = $scope.proizvedeno.total_energy_output;

        $scope.countTo = $scope.output;
        $scope.countFrom = 0;
$scope.$watch("output", $scope.countTo)
console.log($watch);

        $scope.reCount = function () {
            $scope.countFrom = Math.ceil(Math.random() * 300);
            $scope.countTo = Math.ceil(Math.random() * 7000) - Math.ceil(Math.random() * 600);
        }; }]);

我尝试添加监视功能，以自动更新 dom，但这不起作用。有人可以帮我吗？

【问题讨论】：

删除console.log($watch);
您没有在任何可以记录的地方创建名为$watch 的变量。我建议您阅读更多关于 Angular 手表是什么以及如何操作的内容。
我从docs.angularjs.org/api/ng/type/$rootScope.Scope 阅读，但我看不到 var $watch 声明的位置。你能帮帮我吗？ Thnx @thalaivar 也是
$watch 是 $scope 或 $rootScope 的方法。没有这样的变量。
谢谢你，我添加了 var scope = $rootScope;并声明 scope.$watch("output", $scope.countTo);还是不行

标签： angularjs watch

【解决方案1】：

让我把这个作为答案，所以它给这个问题带来了更多的clarity。

您的实际代码：

app.controller('counter', ['$scope', 'factory', function ($scope, factory) {
    factory.get(function (res) {
        $scope.proizvedeno = res;
        $scope.output = $scope.proizvedeno.total_energy_output;

        $scope.countTo = $scope.output;
        $scope.countFrom = 0;
        $scope.$watch("output", $scope.countTo) //Changed this
        console.log($watch); //removed this line

        $scope.reCount = function () {
            $scope.countFrom = Math.ceil(Math.random() * 300);
            $scope.countTo = Math.ceil(Math.random() * 7000) - Math.ceil(Math.random() * 600);
        }; }]);

改版一：

app.controller('counter', ['$scope', 'factory', function ($scope, factory) {
    factory.get(function (res) {
        $scope.proizvedeno = res;
        $scope.output = $scope.proizvedeno.total_energy_output;

        $scope.countTo = $scope.output;
        $scope.countFrom = 0;
        $scope.$watch("output", 
                 function handleChange( newValue, oldValue ) {
                    console.log( "$scope.output:", newValue );
        })

        $scope.reCount = function () {
            $scope.countFrom = Math.ceil(Math.random() * 300);
            $scope.countTo = Math.ceil(Math.random() * 7000) - Math.ceil(Math.random() * 600);
        }; }]);

【讨论】：

谢谢你，我回家后试试现在我离开办公室
您好，我使用这个，但是在我将新数据添加到数据库后，dom 没有任何变化。仅在刷新后...我想要实时数据。谢谢
嘿@Thalaivar 你在吗？

【解决方案2】：

大家好，我用超时解决了这个问题，我不知道这是不是最好的解决方案，但这对我有用。谢谢大家

app.controller('counter', ['$scope', '$http', '$timeout',  function ($scope, $http, $timeout) {
$scope.reload = function () {              //add new function for timer
$http.get(serviceBase + 'live-stats').
    success(function (res) {
         $scope.proizvedeno = res;

            $scope.wireless_charging_count = $scope.proizvedeno.wireless_charging_count;
            $scope.countTo3 = $scope.wireless_charging_count;
            $scope.countFrom3 = 0;
            $scope.reCount = function () {
            $scope.countFrom3 = Math.ceil(Math.random() * 300);
                    $scope.countTo3 = Math.ceil(Math.random() * 7000) - Math.ceil(Math.random() * 600);
            };

         });
         var reload = $timeout(function(){          //set here $timeout
            $scope.reload();
            }, 5000);
            $scope.$on('$destroy', function(){      //must cancel $timeout
$timeout.cancel(reload);
});  
     };
    $scope.reload();     
}]);

你必须取消定时器，否则你会遇到像我一样的问题:)，更改路由定时器后仍然工作并从 url 重新加载数据。谢谢大家

【讨论】：