Angularjs 编辑已解析对象不会更新父/子控制器数据
我使用ui路由器中可用的解析选项在父控制器和子控制器之间共享数据。 PFB规范Angularjs 编辑已解析对象不会更新父/子控制器数据,angularjs,Angularjs,我使用ui路由器中可用的解析选项在父控制器和子控制器之间共享数据。 PFB规范 var app = angular.module('app',['ngRoute','ui.router']); app.config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise('/first/second'); $stateProvider .state(
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;
}
});
});
<!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>
这就是普朗克。加载页面时，子输入字段和父输入字段都具有相同的名称。但是，如果我编辑其中任何一个值，它不会更新其他属性。两者看起来都很独立。如何使两个控制器使用相同的数据，如果在一个控制器中编辑数据，另一个控制器也会在没有任何$broadcast或$watch的情况下更新，这可以通过与控制器使用共享服务来实现。通过将两者的ng模型设置为使用共享对象，可以通过服务使两个控制器保持同步。服务处理共享对象，控制器只引用它。无需观看或广播 更新的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: "" }
});