Question

我使用resolve中提供的ui-router选项在父控制器和子控制器之间共享数据。 PFB代码，

var app = angular.module('app',['ngRoute','ui.router']);

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.otherwise('/first/second');


        $stateProvider
            .state('first', {
                url: '/first',
                template: "<div>First Page :: Name - <input type='text' ng-model='parentName'/></div> <div ui-view=''></div>",
                resolve: {
                    name : function(){return 'Dheepan Raju';}
                },
                controller : function($scope,name){
                  $scope.parentName = name;
                }
            })
            .state('first.second', {
                url: '/second',
                template: "<div>Second Page :: Name - <input type='text' ng-model='childName'/></div>",
                controller : function($scope,name){
                  $scope.childName = name;
                }
            });
});

的index.html

<!DOCTYPE html>
<html ng-app='app'>

  <head>
    <script src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2" data-require="angular.js@*"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" data-semver="1.3.15" data-require="ngRoute@1.3.15"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>

            <div ui-view=""></div>
  </body>

</html>

Here是吸血鬼。加载页面时，子输入字段和父输入字段具有相同的名称。但是如果我编辑这些值中的任何一个，它就不会更新其他属性。两者看起来都很个如何让两个控制器使用相同的数据，如果在一个控制器中编辑它，其他控制器也会更新（没有任何$broadcast或$watch）

Answer 1

这可以通过与控制器一起使用共享服务来实现。通过将两者的ng-model设置为使用共享对象，您可以通过该服务使两个控制器保持同步。该服务处理共享对象，控制器只引用它。不需要手表或广播。

更新了script.js

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.otherwise('/first/second');


        $stateProvider
            .state('first', {
                url: '/first',
                template: "<div>First Page :: Name - <input type='text' ng-model='parentName.name''/></div> <div ui-view=''>Hell</div>",
                resolve: {
                    name : function(){return 'Dheepan Raju';}
                },
                controller : function($scope,name, SharedData){ 
                  // Init
                  SharedData.name = name;

                  $scope.parentName = SharedData;                     
                }
            })
            .state('first.second', {
                url: '/second',
                template: "<div>Second Page :: Name - <input type='text' ng-model='childName.name'/></div>",
                controller : function($scope, SharedData){
                  $scope.childName = SharedData;
                }
            });
}).service("SharedData", function() {
  return { name: ""  }
});

我已更新您的plunker，显示：http://plnkr.co/edit/XIvHXSy6oDuuuKsmE3AF?p=preview

编辑已解析的对象不会更新父/子控制器数据

1 个答案: