为什么不能重复使用在AngularJS服务刷新视图 [英] Why won't re-usable service refresh view in AngularJS

问题描述

在AngularJS的HTML视图包含通过视图的的CController和一个可重用的服务发送其数据的形式。可重复使用的服务接收的形式的值，并且被充电以更新两个饼干，其值应在视图被打印的值。在我devbox，Firefox的调试器显示窗体的数据进入的贡献莫过于的处理方法。但是观点并不17930与被服务的表单处理程序改变了cookie的值更新。具体来说，视图元素应该显示或者基于由表单的处理程序修改cookie的值隐藏。 需要什么具体的改变code至作出以下，从而能够通过表单处理程序修改Cookie值能够改变在视图中显示的内容？

An html view in AngularJS contains a form that sends its data through the view's ccontroller and into a reusable service. The re-usable service receives the form's value, and is charged with updating the values of two cookies whose values should be printed in the view. In my devbox, the FireFox debugger shows that the form's data enters the serice's handler method. But the view is not beiing updated with the values of the cookies which are changed by the service's form handler. Specifically, view elements should be shown or hidden based on the values of cookies that are changed by the form's handler. What specific changes need to be made to the code below so that the cookie values changed by the form handler are able to change the content that is shown in the view?

所有重新创建此probblem所需的code是在，您可以通过点击此检查plnkr链接，您可以通过下面的图形用户界面 / someroute （从下拉导航菜单），并在表格中输入一个值再现问题。

All of the code required to recreate this probblem is in the plnkr that you can examine by clicking on this link, and you can recreate the problem by following the gui to /someroute (from the drop down navigation menu) and entering a value in the form.

可重复使用的服务 someclass.js ，其内容是在这里：

The re-usable service is someclass.js, and its content is here:

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表单上面提到的是：

The web form in someroute_start.html referred to above is:

    <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 ，其code是：

The controller for someroute.html is someroute.js, and its code is:

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

    $scope.someclass = someclass;

});

所有重现该问题所需的其余code是在，您可以通过点击检查plnkr此链接。 需要将code至作出的plnkr获得 someroute.html 视图被刷新/改基础上，<$ C有什么具体的变化$ C> someclass.js 视图的形式的数据业务的处理？

All of the remaining code required to reproduce the problem is in the plnkr that you can examine by clicking on this link. What specific changes need to be made to the code in the plnkr to get the someroute.html view to be refreshed/changed based on the someclass.js service's handling of the view's form data?

请注意，您可以清除cookie和通过点击GUI注销按钮重新启动测试。

Note that you can clear the cookies and restart the test by clicking the logout button in the GUI.

推荐答案

使用 $间隔检查Cookie值应该为你工作。

Using $interval to check the cookie value should work for you.

不过，也有你的code其他的问题：

However, there are other problems in your code as well:

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这里有他们所有的固定。

这篇关于为什么不能重复使用在AngularJS服务刷新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！