Javascript 为什么赢了'；AngularJS中的可重用服务刷新视图

AngularJS中的html视图包含一个表单，该表单通过视图的ccontroller将其数据发送到可重用的服务中。可重用服务接收表单的值，并负责更新两个cookie的值，这两个cookie的值应该打印在视图中。在我的devbox中，FireFox调试器显示表单的数据进入serice的处理程序方法。但是视图没有被更新为cookies的值，cookies的值由服务的表单处理程序更改。具体来说，视图元素应该根据表单处理程序更改的cookie值显示或隐藏需要对下面的代码进行哪些特定更改，以便表单处理程序更改的cookie值能够更改视图中显示的内容？

重新创建此问题所需的所有代码都在中，您可以通过以下方式重新创建问题：按照gui进入

/someroute

（从下拉导航菜单）并在表单中输入值

可重用服务是

someclass.js

，其内容如下：

angular
.module('someclass', ['ngCookies'])
.service('someclass', ['$rootScope', '$http', '$cookies', function($rootScope, $http, $cookies){
    var $this = this;
    this.prop1 = $cookies['test1'];
    this.prop2 = $cookies['test2'];
    this.resultphone = {};

    this.method1 = function(isValid, resultphone) {
        if(isValid){
            var funcJSON = $this.resultphone;
            funcJSON.wleadid = '1';
            $cookies.test1 = 'yes';
            if(funcJSON.phonenum1=='ok'){
              $cookies.test2 = 'ok';
            } else {
              $cookies.test2 = 'notok';
            }
        }
    };

    }]);

html视图为

someroute.html

，其内容为：

someclass.prop1 is: {{someclass.prop1}} <br>
someclass.prop2 is: {{someclass.prop2}} <br>
<div ng-show="someclass.prop1!='yes'">
    <h1>someclass prop1!</h1>
    <div ng-include="'someroute_start.html'"></div>
</div>
<div ng-show="someclass.prop1=='yes'">
    Inside prop1 is yes.  <br>
    <div ng-show="someclass.prop2=='ok'">
        <h1>Include start.  ok. </h1>
        <div ng-include="'someroute_first.html'"></div>
    </div>

    <div ng-show="someclass.prop2!='ok'">
        <h2>Include second.  NOT ok. </h2>
        <div ng-include="'someroute_second.html'"></div>
    </div>

</div>

someroute.html

的控制器是

someroute.js

，其代码是：

angular
.module('someroute', ['someclass'])
.controller('someroute', function($scope, someclass) {

    $scope.someclass = someclass;

});

重现问题所需的所有剩余代码都在中根据

someclass.js

服务对视图表单数据的处理，需要对plnkr中的代码进行哪些具体更改才能刷新/更改

someroute.html

视图？

---

请注意，您可以通过单击GUI中的注销按钮来清除cookie并重新启动测试。

使用

$interval

检查cookie值应该适合您

但是，代码中还有其他问题：

1. nagivation controller is not used, hence, logout doesn't work
2. $cookie API of version 1.3+ is used while you are using angular 1.2

---

所有问题都已解决。

您需要隔离问题。。。使用$cookie更新cookie值，使用$this更新范围值。不是$watch问题，只是因为“prop1”和“prop2”忽略了cookie内容：

this.method1 = function(isValid) {
    if(isValid){
        var funcJSON = $this.resultphone;
        funcJSON.wleadid = '1';
        $cookies.test1 = 'yes';
        if(funcJSON.phonenum1=='ok'){
          $cookies.test2 = 'ok';
          $this.prop2 = 'ok';
        } else {
          $cookies.test2 = 'notok';
          $this.prop2 = 'notok';
        }
    }
};

---

我做了一个更新的

只需启动一个计时器来检查cookie值，比如说每秒一次。@sdfacre我将把计时器放在

plnkr

代码中的什么位置，它是什么样子的。我在谷歌上搜索

$interval

，但是我以前没有使用过这个工具。请看@sdfacre如果你的代码变成

$interval（函数（）{if（$cookies['test1']！==this.prop1）{$this.prop1=$cookies['test1']；}if（$cookies['test2']！==this.prop2）{$this.prop2=$cookies['test2']；}，1000），但我无法测试它，直到logout（）链接起作用，我通过在
index.html
中更改以下内容来激活该链接：
。但是启用
logout（）
会导致代码中断，因为它会清空Cookie，
/someroute
无法处理空Cookie。您是否愿意查看
logout（）
，以便您的代码可以进行测试？您的代码中有几个问题，我现在已经解决了。请再次检查plunker。感谢您和+1在此方面的帮助。好的，它回答了问题，但$timeout增加了复杂性，一个$this.prop=值就可以解决观看问题。感谢您和+1花时间帮助我。我已阅读。。。谢谢你的解释。。。我也喜欢$timeout解决方案：-）
this.method1 = function(isValid) {
    if(isValid){
        var funcJSON = $this.resultphone;
        funcJSON.wleadid = '1';
        $cookies.test1 = 'yes';
        if(funcJSON.phonenum1=='ok'){
          $cookies.test2 = 'ok';
          $this.prop2 = 'ok';
        } else {
          $cookies.test2 = 'notok';
          $this.prop2 = 'notok';
        }
    }
};