$ watchはサービス変数の変更を検出しません

私はangularjsを初めて使用していますが、サービス中の変数の変更時に$ watchが起動しないというこの奇妙な問題に直面しています。私はどこでミスをしたのか分かりません。

script.jsファイル：

var app = angular.module("app", []); 
app.factory("loggedInUser", [loggedInUser]); 

function loggedInUser() { 
    var currentLoggedInUser = undefined; 
    setTimeout(function() { 
    currentLoggedInUser = "Karthik"; 
    console.log("Updated user name"); 
    }, 3000); 
    return { 
    getLoggedInUser: function() { 
     return currentLoggedInUser; 
    } 
    }; 
} 

app.controller("ctrl", ["$scope", "loggedInUser", ctrl]); 

function ctrl($scope, loggedInUser) { 
    var vm = this; 
    $scope.$watch(function() { 
    return loggedInUser.getLoggedInUser(); 
    }, function() { 
    vm.loggedInUserName = loggedInUser.getLoggedInUser(); 
    console.log("Inside Watch"); 
    },true); 
}

HTML：代わりのsetTimeoutの

<html> 

    <head> 
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js" data-require="[email protected]" data-semver="1.5.8"></script> 
    <link href="style.css" rel="stylesheet" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="app"> 
    <h1 ng-controller="ctrl as vm"> 
     Hello <span ng-bind="vm.loggedInUserName"></span> 
    </h1> 
    </body> 

</html>

出典

2017-01-18 Karthik

あなたは何を見ていますか？ $ watch（ 'some.variable'、（old-val、new-val）=> {do_something（）;} – rrd

@rrd私は見ています変数 'currentLoggedInUser'の変更について – Karthik

私は最近、このような質問に答えました。ここでは、http://stackoverflow.com/a/41693955/1061668 –

使用$タイムアウト？ ..それは$スコープを必要とする原因$は.. $タイムアウトが...のsetTimeoutのための角度ラッピングです（角イベントの外に）適用され、何かのように：

// Code goes here 

var app = angular.module("app", []); 
app.factory("loggedInUser", ["$timeout", loggedInUser]); 

function loggedInUser($timeout) { 
    var currentLoggedInUser; 
    $timeout(function() { 
    currentLoggedInUser = "Karthik"; 
    console.log("Updated user name"); 
    }, 3000); 
    return { 
    getLoggedInUser: function() { 

     return currentLoggedInUser; 
    } 
    }; 
} 

app.controller("ctrl", ["$scope", "loggedInUser", ctrl]); 

function ctrl($scope, loggedInUser) { 
    var vm = this; 
    $scope.$watch(function() { 
    return loggedInUser.getLoggedInUser(); 
    }, function() { 
    vm.loggedInUserName = loggedInUser.getLoggedInUser(); 
    console.log("Inside Watch"); 
    },true); 
}

しかし..あなたが代わりのSetTimeout機能を使用したい場合：

// Code goes here 

var app = angular.module("app", []); 
app.factory("loggedInUser", ["$rootScope",loggedInUser]); 

function loggedInUser($rootScope) { 
    var currentLoggedInUser = undefined; 
    setTimeout(function() { 
    $rootScope.$apply(function(){ 
    currentLoggedInUser = "Karthik"; 
    console.log("Updated user name"); 
    }); 
    }, 3000); 
    return { 
    getLoggedInUser: function() { 
     return currentLoggedInUser; 
    } 
    }; 
} 

app.controller("ctrl", ["$scope", "loggedInUser", ctrl]); 

function ctrl($scope, loggedInUser) { 
    var vm = this; 
    $scope.$watch(function() { 
    return loggedInUser.getLoggedInUser(); 
    }, function() { 
    vm.loggedInUserName = loggedInUser.getLoggedInUser(); 
    console.log("Inside Watch"); 
    },true); 
}

出典

2017-01-18 13:11:13

これは働いています！？ – Karthik

私は説明でそれを説明します...原因SetTimeoutはjavascriptイベント（外角）です。したがって、$ scope（）が必要です。$ apply（）は動作しますが、$ timeoutは$ scopeを持つSetTimeoutです。 apply（）apply ..それはラップです –

あなたはsetTimeoutと$ scopeの使い方を見せてくれますか$ apply ins $ timeoutを使用していますか？ – Karthik

$ watchはサービス変数の変更を検出しません

答えて

関連する問題