Menu
I'd like to share the $scope functions of one controller in another controller, in this case for an AngularUI dialog.
Specifically in the example below, I'd like $scope.scopeVar to be available in PopupCtrl.
Here is a Plunkr
Resolve code based on mlarcher's comment here
main.js
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="[email protected]" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="[email protected]" 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>
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>
638
If the two controller is nested in One controller. Then you can simply call: $scope. parentmethod();
Since both functions are in the same scope you can simply call $scope. fn1() inside fn2.
You can't inject controllers into one another.
You have two choices:
You can have the scope property that should be available across controllers attached to the rootScope instead. So in your case, it will look like:$rootScope.scopeVar = "Data that will be available across controllers"; However, using this is not recommended - Read Common Pitfalls
Services. Anytime you have a functionality or data that is to be re-used, you are better off with services.
In your case, you can create a service that stores the data, allows changes to it and passes the data to whoever needs it. This answer describes it in detail.
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
