Javascript 在AngularJS中使用来自不同控制器的$scope函数
我想在另一个控制器中共享一个控制器的$scope函数,在本例中为AngularUI对话框 特别是在下面的示例中,我希望$scope.scopeVar在PopupCtrl中可用 main.jsJavascript 在AngularJS中使用来自不同控制器的$scope函数,javascript,angularjs,angular-ui,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui,Angular Ui Bootstrap,我想在另一个控制器中共享一个控制器的$scope函数,在本例中为AngularUI对话框 特别是在下面的示例中,我希望$scope.scopeVar在PopupCtrl中可用 main.js angular.module('MyApp', ['ui.bootstrap']); var MainCtrl = ['$scope', '$dialog', '$rootScope', function($scope, $dialog, $rootScope) { $scope.myTestV
angular.module('MyApp', ['ui.bootstrap']);
var MainCtrl = ['$scope', '$dialog', '$rootScope', function($scope, $dialog, $rootScope) {
$scope.myTestVar = "hello";
$scope.myOpts = {
backdrop: true,
keyboard: true,
backdropClick: true,
resolve: { MainCtrl: function() { return MainCtrl; }},
templateUrl: 'myPopup.html',
controller: 'PopupCtrl'
};
$scope.scopeVar = 'scope var string that should appear in both index.html and myPopup.html.';
$rootScope.rootScopeVar = "rootScope var string that should appear in both index.html and myPopup.html.";
$scope.openDialog = function() {
var d = $dialog.dialog($scope.myOpts);
d.open().then(function() {
$scope.scopeVar = 'scope var string should be changed after closing the popup the first time.';
$rootScope.rootScopeVar = 'rootScope var string should be changed after closing the popup the first time.';
});
};
}];
var PopupCtrl = ['$scope', 'dialog', 'MainCtrl', function ($scope, dialog, MainCtrl) {
var key;
for (key in MainCtrl) {
$scope[key] = MainCtrl[key];
}
$scope.close = function(){
dialog.close();
}
}];
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>
<script src="script.js"></script>
<link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="MainCtrl">
<h4>{{scopeVar}}</h4>
<h4>{{rootScopeVar}}</h4>
<br>
<button class="btn btn-primary" type="button" data-ng-click="openDialog()" >Popup</button>
</body>
</html>
{{scopeVar}}
{{rootScopeVar}}
弹出窗口
myPopup.html
<div class="modal-body">
<h4>{{scopeVar}}</h4>
<h4>{{rootScopeVar}}</h4>
</div>
<div class="modal-footer">
<button data-ng-click="close()" class="btn btn-large popupLarge" >Close</button>
</div>
{{scopeVar}}
{{rootScopeVar}}
接近
您有两种选择:
rootScope
的控制器之间可用。因此,在您的情况下,它看起来像:$rootScope.scopeVar=“跨控制器可用的数据”代码>但是,不建议使用此选项-阅读
在您的情况下,您可以创建一个服务来存储数据,允许对其进行更改,并将数据传递给任何需要它的人。答案对此进行了详细描述。相反,不要创建一个服务,它的唯一目的是存储和返回数据位,当然,全局状态很糟糕,您应该节约使用$rootScope,就像您(希望)在任何语言中使用全局变量一样。特别是,不要将其用于代码,只用于数据。如果你想把一个函数放到$rootScope上,那么最好把它放到一个服务中,这个服务可以被注入到需要的地方,并且更容易测试。文章说,[$rootScope存在,但它可以用于邪恶]我认为有第三种选择:在第三个控制器的作用域中包含两个控制器,然后在每个子控制器内使用$parent共享数据。