javascript - 关于在 Angular 的服务中定义的变量的问题 ...

Question

比如在下有个这么个破玩意：

HTML:

<p ng-controller="ngCtrl">
    <p>{{str}}</p>
    <button ng-click="changeStr()">changeString</button>
</p>

JavaScript:

// Angular Application.
var ngApp = angular.module("ngApp", ["ngCtrls", "serviceModule"]);
            
// Controller Module.
var ngCtrls = angular.module("ngCtrls", []);
ngCtrls.controller("ngCtrl", function ($scope, $myService) {
    $scope.str = $myService.string;
    $scope.changeStr = $myService.changeString;
});
            
// My Service.
var serviceModule = angular.module("serviceModule", []);
serviceModule.service("$myService", function () {
    var self = this;
                
    function changeString () {
        self.string = "b";
    }
                
    this.string = "a";
    this.changeString = changeString;
            
});            

问题是：如何在执行 $scope.changeStr() 后让 $scope.str 获取最新的 $myService.string?

在下想到的方法是：

1. 依赖 $rootScope;

2. 将服务中的 changeString 中的 self.string 改为 this.str，这样在执行的时候其实修改的是控制器中的 $scope.str.

各位还有没有其他更好的方法？

Answer 1

不明白题主这么做的目的，controller和service各司其职。如果仅仅是做changeStr的话，应该直接在controller全做了。

如果这仅仅是个例子，我的建议是这样：链接描述

var ngCtrls = angular.module("ngCtrls", []);
ngCtrls.controller("ngCtrl", function ($scope, $myService) {
    $scope.str = $myService.string;
    $scope.changeStr = function(){
      $scope.str = $myService.changeString();
    }
});
            
// My Service.
var serviceModule = angular.module("serviceModule", []);
serviceModule.service("$myService", function () {
    var self = this;
    function changeString () {
        self.string = "b";
        return self.string;
    }
    this.string = "a";
    this.changeString = changeString;
});   

总而言之:
1.所有操作界面的代码都应放在controller中。即双向绑定不要试图绑service中的数据。
2.只能controller依赖service，service不能依赖controller。

Answer 2

$scope.changeStr = function(){
    $myService.changeStr();
    $scope.str = $myService.string;
}

Answer 3

你是否要做可以记住页面上状态和数据的功能？
如果是的话 可以用$value实现

ngCtrls.value("ngCtrl.value",{
    str : 'b';
})
.controller("ngCtrl",['$scope','ngCtrl.value','$rootScope', function ($scope,value,$rootScope) {
    $scope.str = value.str;//绑定$scope.str 等于 value中的值
    
    //直接修改value中的值  $scope.str 也会变
    value.str = 'a';
    
    //如果超出了ng的范围的话 用$apply方法手动刷新
    $rootScope.$apply('str');
}]);