Angular $ watch不起作用

时间:2017-02-03 14:41:10

标签: javascript angularjs

我正在尝试观察我在服务中设置的变量,当它发生变化时 - 我在控制器中更改了一个值,但是监视事件没有触发。

这是我的代码:

var module = angular.module("Test", []);
module.service("testService", TestService);
module.controller("testController", TestController);

function TestService()
{
    var self = this;
    self.Message = "1";
}

TestController.$inject =["$scope", "testService"];
function TestController($scope, testService)
{
    var self = this;
    self.Message = testService.Message;
    $scope.Message = self.Message;

    $scope.$watch("Message", onMessageChange, true)
    self.click = function()
    {
        testService.Message = "2";        
    }

    function onMessageChange(oldVal, newVal)
    {
        self.Message = newVal;
    }
}

这是html:

<!DOCTYPE html>
<html >
    <head>
        <title>Test</title>

     <script src=".\angular.js"></script>    
     <script src=".\test.js"></script>    
    </head>
    <body ng-app="Test">
   <div  ng-controller="testController as ctrl">
    <button  ng-click="ctrl.click()"> Click </button>
    <span> Message: {{ctrl.Message}}</span>
</div>
    </body>
</html>

为什么不工作?我做错了什么?

1 个答案:

答案 0 :(得分:1)

您可以按以下方式观看服务变量:

Test::HammerOfTheGods.start(ARGV)
Test::Git.start(ARGV)

您还需要更改oldVal和newVal:

$scope.$watch(function() { return testService.Message;}, onMessageChange, true)

此代码仅关注您的$ scope.Message而不是您的服务变量。

function onMessageChange(newVal, oldVal)
{
    self.Message = newVal;
}

只有在点击功能中更改变量时才会触发:

$scope.$watch("Message", onMessageChange, true)