Question

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

重新创建此问题所需的所有代码都在the plnkr that you can examine by clicking on this link中，您可以通过跟随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_start.html中的网络表单是：

    <form name="confirmForm" ng-submit="someclass.method1(confirmForm.$valid)" novalidate>
        Enter some value: 
        <input type="text" name="phonenum1" ng-model="someclass.resultphone.phonenum1" required />
        <button type="submit" ng-disabled="confirmForm.$invalid" >Submit</button>
    </form>

someroute.html的控制器为someroute.js，其代码为：

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

    $scope.someclass = someclass;

});

重现问题所需的所有剩余代码都在the plnkr that you can examine by clicking on this link中。 需要对plnkr中的代码进行哪些具体更改才能根据someroute.html服务对视图表单数据的处理来刷新/更改someclass.js视图？

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

Answer 1

使用$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

This plunker here将它们全部修复了。

Answer 2

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

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';
        }
    }
};

我做了更新的plunker

为什么AngularJS中不能重用服务刷新视图

2 个答案: