在没有服务的情况下跨$ scope同步对象

时间:2015-04-28 18:27:53

标签: asp.net-mvc angularjs

我正在尝试将一段代码用于无法完全控制一半代码的地方。简而言之,有一个主控制器具有一个然后从第二个控制器获得的对象。当主控制器1更新对象时,控制器2从不看到它。我认为这是因为2个控制器没有观察对象/属性(副本?)。如果你注意到Angular绑定到{{Title}},这就是问题可以看作" Title"永远不会在第二个控制器中更新。

以下是一些显示问题的示例代码。目前,代码执行3秒循环以再次获取对象,并将其重新分配给第二个控制器。

这里的代码我无法触及。我有来源,但意大利面,我只是概括了这里的内容。

// html I can't really change, outside my world.
<div id="mainApp" ng-app="MainApp" ng-controller="mainController">
</div>

// code I can't "really" change, non-angular (can't use $http).
$ajax(get...)
.success(function (result) {
    $('#element').html(result);
})

下面的代码是相当分离的,我可以修补它。 HTML是从上面的$ ajax调用调用的服务返回的。

// code I can change (the "result", or html returned from the service)
// containerController.js
var containerController = function ($scope, $timeout) {
   $scope.models = {
      item: null;
   }

   $scope.getItem = function() {
      var mainAppScope = angular.element($('#mainApp')).scope();
      $scope.models.item = mainAppScope.GetItem();
   }

   $scope.getItem();

    // HACK WORK AROUND
    // Get the item from the mainController.
    var itemSync = setInterval(function () {
    $scope.getItem();
        $scope.$apply();
    }, 3000);
}

从服务返回的HTML(它实际上是一个ASP.NET MVC部分视图)

// HTML
<div id="container" ng-app="containerApp" ng-controller="containerController">
    <!-- This will bind the first time, but won't syncronize when other controller updates -->
    <!-- the controller is currently doing a loop to do so, not good. -->
    <div>{{models.item.Title}}</div>
</div>

<script type="text/javascript" src="~/Scripts/controllers/containerController.js"></script>
<script type="text/javascript">
    // This will inject the controller and new app into angular.
    var container = document.getElementById('container');

    var containerApp = angular.module('containerApp', []);

    containerApp.controller('containerController', ['$scope', containerController]);

    angular.bootstrap(angular.element(container), ['containerApp']);
</script>

1 个答案:

答案 0 :(得分:0)

你可以改变hacky部分以使用$interval,它将设法在每个间隔后运行摘要周期

var itemSync = $interval(function () {
   $scope.getItem();
}, 3000);

要将对象从父控制器同步到子控制器,您可以使用模型的对象结构,这只不过是Javascript prototypal&amp;将更新数据。

$scope.pageData = {}; //declare this in parent controller
$scope.pageData.title = 'Title 1' //use this where you want to change in child controller
相关问题