为什么在 AngularJS 中无法重用服务刷新视图

Why won't re-usable service refresh view in AngularJS

本文关键字：服务 刷新 新视图 AngularJS 为什么      更新时间：2023-09-26

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

重新创建此问题所需的所有代码都在 plnkr 中，您可以通过单击此链接进行检查，并且您可以通过按照 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 Web 表单是： 

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

重现问题所需的所有剩余代码都在 plnkr 中，您可以通过单击此链接进行检查。 需要对 plnkr 中的代码进行哪些具体更改才能根据someclass.js服务对视图表单数据的处理来刷新/更改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

这里的这个 plunker 将它们全部固定下来。

您需要隔离关注点...使用 $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';
        }
    }
};

我做了一个更新的 plunker

相关文章：