使用服務在控制器之間進行角度共享數據

Question

我正在使用服務在控制器之間共享數據。 在第一個控制器中，我這樣調用函數：

muscleGroupService.setState(true);

這是服務功能代碼：

  var state;

  function setState(x) {
        state = x;
    }

x變為true，但是由於某種原因狀態沒有變為true，它保持未定義狀態。

我怎樣才能解決這個問題 ？

編輯

我相信我已經找到問題所在，但不確定如何解決。

在Index.html中，我有以下代碼行：

<div class="modal fade" ng-include src="'/Content/Templates/Modals/Admin/ModalMuscleGroup.html'"  id="addModal"> </div>

在進入ng-include頁面時，包括ModalMuscleGroup.html和模態窗口的控制器。

當我做某事時，我會模態widnow控制器。 像這樣：

muscleGroupService.isItemBeingUpdated（）

由於我不關注變量狀態，因此返回未定義。

我相信可以使用$ rootScope和$ rootScope。$ broadcast和$ rootScope。$ on進行修復。 還有其他不使用$ rootScope的方法嗎？

編輯2

這是代碼：

Ctrl1的一部分（應將數據發送到服務）：

$scope.updateItem = function (item) {
    muscleGroupService.setState(true);
    muscleGroupService.setItemForUpdate(item);
};

服務的相關部分：

app.angularModule.service('muscleGroupService', function(breeze, logger) {


    breeze.config.initializeAdapterInstance("modelLibrary", "backingStore", true);

    var serviceName = "/breeze/MuscleGroup";

    var manager = new breeze.EntityManager(serviceName);

    manager.enableSaveQueuing(true);

    var removeItem = breeze.core.arrayRemoveItem;

    var items = [];
    var state;

    var itemBeingUpdated;


    return {

        setState: function(x) {
            state = x;
        },

        isItemBeingUpdated : function() {
            return state;
        },

        setItemForUpdate : function(item) {
             itemBeingUpdated = item;
        },

        getItemBeingUpdated : function() {
            return itemBeingUpdated;
        },

        updateItem : function() {
            if (itemBeingUpdated.entityAspect.entityState.isModified()) {
                saveChanges();
            }
        },

這是模式ctrl：

app.angularModule.controller('AdminMuscleGroupModalCtrl', function ($scope, breeze, muscleGroupService) {

    $scope.init = function () {
        if (muscleGroupService.isItemBeingUpdated() == true) {
            $scope.itemBeingUpdated = muscleGroupService.getItemBeingUpdated();  
            $scope.NewName = itemBeingUpdated.Name;
            $scope.NewDesc = itemBeingUpdated.Description;
        }
    };

    $scope.init();
});

這是Ctrl1的html的一部分：

    <tbody>
                        <tr data-ng-repeat="item in items">
                            <td>{{item.Name}}
                            </td>
                            <td>{{item.Description}}
                            </td>
                            <td> <button class="btn btn-primary" data-ng-click="updateItem(item)" data-toggle="modal" href="#addModal"><i class="glyphicon glyphicon-pencil"></i> Edit</button>
     </tr>
                    </tbody>

 <div class="modal fade" ng-include src="'/Content/Templates/Modals/Admin/ModalMuscleGroup.html'"  id="addModal"> </div>

和模態html：

<div class="modal-body">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputName" class="col-lg-2 control-label">Name</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" data-ng-model="NewName" id="inputName" placeholder="Name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputDesc" class="col-lg-2 control-label">Description</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" data-ng-model="NewDesc" id="inputDesc" placeholder="Description">
                    </div>
                </div>
            </form>
        </div>

Answer 1

嘗試如下定義函數：

myApp.factory('myService', function(){
    var state;
    return {
        setState:function(x){
            state = x;
        }
    }
});

Answer 2

嘗試

this.state = null;
that = this;
function setState(x) {
    that.state = x;
}

Answer 3

您是否嘗試過this.state = x ？

Answer 4

我設法解決了我的問題，此答案有所幫助： 鏈接

所以我做了這樣的事情：

$scope.$watch( function() { return muscleGroupService.getAction(); }, function() {
        if (muscleGroupService.getAction() == "edit") {
            $scope.$watch(function () { return muscleGroupService.getItemForUpdate(); }, function () {
                $scope.action = "edit";
                $scope.ItemForUpdate = muscleGroupService.getItemForUpdate();
                $scope.NewName = $scope.ItemForUpdate.Name;
                $scope.NewDesc = $scope.ItemForUpdate.Description;
            });
        } else {
            $scope.action = "add";
            $scope.NewName = "";
            $scope.NewDesc = "";
        }
    }); 

不知道這是否是最佳做法，但是它可以工作:)

Answer 5

angular中的服務本質上是構造函數，因此在您將服務注入到任何地方的幕后，您都會得到以下調用的結果：

new serviceFnc();

Angular只會運行一次（單例），然后在您注入服務的任何地方給您該對象

因此對於您的示例，您可以執行以下操作：

myApp.service('muscleGroupService', function(){
//again this function will be newed once
var service = this;

//You dont even need a function just inject muscleGroupService in your controllers and set muscleGroupService.state = true || false
service.state = false;

});

請參閱此SO Post，以獲取有關服務/工廠的更多詳細信息