web-dev-qa-db-fra.com

Utilisation des fonctions $ scope d'un autre contrôleur dans AngularJS

Je voudrais partager les fonctions $ scope d'un contrôleur dans un autre contrôleur, dans ce cas pour une boîte de dialogue AngularUI.

Plus précisément dans l'exemple ci-dessous, j'aimerais que $ scope.scopeVar soit disponible dans PopupCtrl.

Voici un Plunkr

Résoudre le code basé sur le commentaire de mlarcher ici

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>
javascriptangularjsangular-uiangular-ui-bootstrap
12
ozandlb

Vous avez deux choix:

  1. Vous pouvez avoir la propriété scope qui devrait être disponible sur tous les contrôleurs attachés à rootScope à la place. Donc, dans votre cas, cela ressemblera à:
    $rootScope.scopeVar = "Data that will be available across controllers"; Cependant, son utilisation n'est pas recommandée - Lire Pièges courants

  2. Services . Chaque fois que vous avez une fonctionnalité ou des données qui doivent être réutilisées, vous êtes mieux avec les services.

Dans votre cas, vous pouvez créer un service qui stocke les données, autorise les modifications et transmet les données à quiconque en a besoin. This réponse le décrit en détail.

31
callmekatootie