在控制器angular js之间共享数据

Question

为什么$scope.items在First和Second控制器还具有价值First为什么它亘古不变的变化值From controller调用后Load()函数？

家用控制器：

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);
        }
    }
}

Index.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>

Custom.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;
            }
        };
    });

Answer 1

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

这里的执行顺序如下：

1. 控制器'First'及其变量$scope.items ；
2. 控制器“ Second”及其变量$scope.items ；
3. 来自$http的回调被调用，但是您绝不$scope.items在任何一个控制器上更新$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事件在控制器之间进行通信。

Answer 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;
            }
        }});

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