Использование функций $ scope из другого контроллера в AngularJS

Я хотел бы поделиться функциями $ scope одного контроллера на другом контроллере, в этом случае для диалога AngularUI.

В частности, в приведенном ниже примере я хотел бы, чтобы $ scope.scopeVar был доступен в PopupCtrl.

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="[email protected]*" 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>

источник

2013-06-21 ozandlb

У вас есть два варианта:

Вы можете иметь свойство области действия, которые должны быть доступны через контроллеры прикрепленных к rootScope вместо. Так что в вашем случае, это будет выглядеть следующим образом:
$rootScope.scopeVar = "Data that will be available across controllers"; Однако, используя это не рекомендуется - прочитать Common Pitfalls
Services. В любое время, когда у вас есть функциональность или данные, которые необходимо повторно использовать, вам лучше работать со службами.

В вашем случае вы можете создать службу, которая хранит данные, позволяет изменять ее и передает данные тем, кто в ней нуждается. This ответ описывает это подробно.

источник

2013-06-21 07:01:15 callmekatootie

И, наоборот, не создавайте службу, единственной целью которой является сохранение и возврат бит данных. Конечно, глобальное состояние отстойно, и вы должны использовать $ rootScope экономно, как вы бы (надеюсь) использовали с глобальными переменными в любой язык. В частности, не используйте его для кода, а только данные. Если у вас возникнет соблазн поставить функцию на $ rootScope, почти всегда лучше разместить ее в сервисе, который можно вставить туда, где это необходимо, и более легко протестировать.article говорит, что [$ rootScope существует, но его можно использовать для зла ] https://docs.angularjs.org/partials/misc/faq.html#drootscopeexistsbutitcanbeusedforevil – Buddhi

Я думаю, что есть третий вариант: включить два контроллера в область третьего контроллера и затем обмениваться данными с помощью $ parent изнутри каждого из дочерние контроллеры. – ftexperts

Использование функций $ scope из другого контроллера в AngularJS

ответ

Смежные вопросы