在为angularjs中的另一个控制器修改服务后,为什么我的UI不会更新

时间:2017-06-17 06:25:59

标签: angularjs

我有一个服务和两个控制器共享它如下: -

app.factory('Initiate', function(){
  return { init: '', data: '' };
});

以下两个控制器: -

app.controller('initiate_jbolo', function($http, $scope, $compile, Initiate) {
    $scope.start = Initiate;

    $scope.change = function(){
        $scope.start['init'] = true;
        console.log($scope.start['init']);
        if($scope.start['init'] === true){
            $http.get("https://jsonplaceholder.typicode.com/posts/1/comments")
            .success(function (data, status, headers, config) {
                console.log("Successful");
                // console.log(data[0].name);
                $scope.start['data'] = data[0].name;
                console.log($scope.start['data']);
            })
            .error(function (data, status, header, config) {
                console.log("Unsuccessful");
                console.log(data);
            });
        }
    };
});

第二个控制器如下

app.controller('jbolo_controller', function($http, $scope, $compile, Initiate) {

    $scope.start_init = Initiate;
    $scope.first_msg = $scope.start_init['data'];

});

和一个html元素,用于显示第二个控制器范围内这两个控制器共享的数据: -

<div> {{ first_msg }} </div>

从$ http服务获得响应后,我的第二个控制器没有更新fisrt_msg的值。但是,如果我使用以下方式显示其工作: -

{{ start_init['data'] }}

我对angularjs相对较新,非常感谢你的帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

您可以查看工厂变量并进行更新。

load

更改控制器,如:

  app.factory('Initiate', function(){
      var value= { init: '', data: '' };

    return {
        getData: function () {
            return value.data;
        },
        setData: function (newData) {
            value.data= newData;
        },
        getInit: function () {
            return value.init;
        },
        setInit: function (newData) {
            value.init= newData;
        }
    };
    });

第二个控制器是这样的:

app.controller('initiate_jbolo', function($http, $scope, $compile, Initiate) {       
    $scope.data ='';
    $scope.change = function(){
        Initiate.setInit(true);
        console.log($scope.start['init']);
        if(Initiate.getInit === true){
            $http.get("https://jsonplaceholder.typicode.com/posts/1/comments")
            .success(function (data, status, headers, config) {
                console.log("Successful");
                $scope.data = data[0].name;
$scope.$watch('data ', function (newValue, oldValue) {
    if (newValue !== oldValue) Initiate.setData(newValue);
});
            })
            .error(function (data, status, header, config) {
                console.log("Unsuccessful");
                console.log(data);
            });
        }
    };
});