在控制器之间共享数据 Angular js答案

【问题标题】：share data between controllers angular js在控制器之间共享数据 Angular js
【发布时间】：2016-05-01 14:44:17
【问题描述】：

为什么First 和Second 控制器中的$scope.items 仍然有值First 为什么在调用Load() 函数后它没有变为值From controller？

家庭控制器：

namespace MvcApplication6.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetData()
        {
            string data = "From controller";
            return Json(data, JsonRequestBehavior.AllowGet);
        }
    }
}

索引.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/MyScript/Custom.js"></script>
<script src="~/Scripts/angular-animate/angular-animate.min.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>

<div ng-controller="LoadData" id="data">

</div>
<div ng-controller="First">
    {{items}}
</div>
<div ng-controller="Second">
    {{items}}
</div>
<script>
    $(document).ready(function () {
        angular.element(document.getElementById('data')).scope().Load();
    });
</script>

自定义.js

var app = angular.module('MyApp', ['ngAnimate',  'ui.bootstrap']);

app.controller('First', function ($scope, sharedProperties) {
    $scope.items = sharedProperties.getProperty();
    console.log("First controller",sharedProperties.getProperty());
});
app.controller('Second', function ($scope, sharedProperties) {
    $scope.items = sharedProperties.getProperty();
    console.log("Second controller", sharedProperties.getProperty());
});
app.controller('LoadData', function ($scope,$http, sharedProperties) {
    $scope.Load = function () {

        $http({ method: 'GET', url: '/Home/GetData' }).
   success(function (data, status, headers, config) {
       sharedProperties.setProperty(data);
       console.log('Loaded data',data);
   }).
   error(function (data, status, headers, config) {
       alert('error');
   });
}
}
);

app.service('sharedProperties', function () {
        var property = 'First';

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function (value) {
                property = value;
            }
        };
    });

【问题讨论】：

标签： javascript asp.net angularjs asp.net-mvc asp.net-mvc-4

【解决方案1】：

问题在于，在第一和第二控制器中，变量$scope.items 在控制器加载时被初始化。在那一刻之后，它们就不再改变了。

这里的执行顺序如下：

控制器“First”及其变量$scope.items已初始化；
控制器“Second”及其变量$scope.items已初始化；
来自$http 的回调被调用，但您永远不会在任一控制器上更新$scope.items 的值。

作为一种可能的解决方案，您可以实现一个简单的回调机制（标准观察者模式）。例如：

app.service('sharedProperties', function () {
        var property = 'First';
        var callBacks = [];

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function (value) {
                property = value;
                callBacks.forEach(function(callBack) { 
                  callBack(value);
                });
            },
            registerCallback: function(callBack) {
              callBacks.push(callBack);
            }            
        };
    });

然后你让你的控制器注册他们的回调：

app.controller('First', function ($scope, sharedProperties) {
    sharedProperties.registerCallback(function(data) {
      $scope.items = data;
    });

});

您也可以使用Angular events 跨控制器进行通信。

【讨论】：

【解决方案2】：

原因是您正在使用字符串。这意味着当您调用时：

$scope.items = sharedProperties.getProperty();

您正在获取字符串的副本。要在控制器之间共享数据，您可以按以下方式修改控制器：

html：

...
<div ng-controller="First">
    {{items.getProperty()}}
</div>
...

js:

...
app.controller('First', function ($scope, sharedProperties) {
    $scope.items = sharedProperties;
});
...

或修改您的服务：

app.service('sharedProperties', function () {
        // having the 'object' property inside
        var property = {value:'First'};

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function (value) {
                property.value = value;
            }
        }});

这两种解决方案都有效，因为它们正在复制对包含值的对象的引用，而不是复制值本身。

【讨论】：