Peut un contrôleur d'appeler un autre?

Question

Peut un contrôleur d'appeler un autre?

Demandé el 15 de Février, 2012: Quand la question a-t-elle été
95304 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Est-il possible d'avoir un contrôleur de l'utilisation d'un autre?

Par exemple:

La version HTML de ce document imprime simplement un message délivré par l' MessageCtrl de contrôleur dans l' messageCtrl.js le fichier.

<html xmlns:ng="http://angularjs.org/">
<head>
    <meta charset="utf-8" />
    <title>Inter Controller Communication</title>
</head>
<body>
    <div ng:controller="MessageCtrl">
        <p>{{message}}</p>
    </div>

    <!-- Angular Scripts -->
    <script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
    <script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>

Le contrôleur de fichier contient le code suivant:

function MessageCtrl()
{
    this.message = function() { 
        return "The current date is: " + new Date().toString(); 
    };
}

Qui imprime simplement la date du jour.

Si je devais ajouter un autre contrôleur, DateCtrl qui a rendu la date dans un format spécifique de retour à l' MessageCtrl, comment faire? Le DI-cadre semble être concernés par l' XmlHttpRequests et l'évaluation des services.

Quelqu'un peut-il aider?

Demandé el 15 de Février, 2012 par BanksySan

Answer 1

5 Réponses

Answer 2

710voto

Vojta Points 12058

Il y a de multiples façons de communiquer entre les contrôleurs.

Le meilleur est sans doute le partage d'un service:

function FirstController(someDataService) 
{
  // use the data service, bind to template...
  // or call methods on someDataService to send a request to server
}

function SecondController(someDataService) 
{
  // has a reference to the same instance of the service
  // so if the service updates state for example, this controller knows about it
}

Une autre façon est d'émettant un événement sur le champ:

function FirstController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

function SecondController($scope) 
{
  $scope.$emit('someEvent', args);
}

Dans les deux cas, vous pouvez communiquer avec n'importe quel directive.

Répondu el 23 de Février, 2012 par Vojta (12058 Points )

Answer 3

123voto

adardesign Points 6182

Voir ce violon: http://jsfiddle.net/simpulton/XqDxG/

Aussi visionner la vidéo suivante: la Communication Entre les Contrôleurs de

Html:

<div ng-controller="ControllerZero">
  <input ng-model="message" >
  <button ng-click="handleClick(message);">LOG</button>
</div>

<div ng-controller="ControllerOne">
  <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
  <input ng-model="message" >
</div>

javascript:

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
  var sharedService = {};

  sharedService.message = '';

  sharedService.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem();
  };

  sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
  };

  return sharedService;
});

function ControllerZero($scope, sharedService) {
  $scope.handleClick = function(msg) {
    sharedService.prepForBroadcast(msg);
  };

  $scope.$on('handleBroadcast', function() {
    $scope.message = sharedService.message;
  });        
}

function ControllerOne($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'ONE: ' + sharedService.message;
  });        
}

function ControllerTwo($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'TWO: ' + sharedService.message;
  });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

Répondu el 7 de Août, 2012 par adardesign (6182 Points )

Answer 4

52voto

exclsr Points 2076

Voici un exemple de page de deux contrôleurs service de partage de données:

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <script>
var projectModule = angular.module('project',[]);

projectModule.factory('theService', function() {  
    return {
        thing : {
            x : 100
        }
    };
});

function FirstCtrl($scope, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
}

function SecondCtrl($scope, theService) {   
    $scope.someThing = theService.thing; 
    $scope.name = "Second Controller!";
}
    </script>
</head>
<body>  
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
        <input ng-model="thing.x"/>         
    </div>

    <div ng-controller="SecondCtrl">
        <h2>{{name}}</h2>
        <input ng-model="someThing.x"/>             
    </div>
</body>
</html>

Aussi ici: https://gist.github.com/3595424

Répondu el 2 de Septembre, 2012 par exclsr (2076 Points )

Answer 5

33voto

SharpCoder Points 1167

Si vous êtes à la recherche d'émettre et de diffuser des événements, de partager des données ou d'appeler des fonctions entre les contrôleurs, veuillez jeter un oeil à ce lien: et vérifier la réponse en zbynour (en réponse à max de votes). Je cite sa réponse !!!

Si la portée de firstCtrl est parent de l'secondCtrl portée, votre code doit fonctionner en remplaçant $émettent par $de diffusion dans firstCtrl:

function firstCtrl($scope){
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope){
    $scope.$on('someEvent', function(event, mass) {console.log(mass)});
}

Dans le cas où il n'existe pas de relation parent-enfant entre votre étendues que vous pouvez injecter $rootScope dans le contrôleur et la diffusion de l'événement pour tous les enfants étendues (c'est à dire aussi secondCtrl).

function firstCtrl($rootScope){
    $rootScope.$broadcast('someEvent', [1,2,3]);
}

Enfin, lorsque vous avez besoin pour l'envoi de l'événement de contrôleur enfant pour les étendues vers le haut, vous pouvez utiliser $scope.$en émettent. Si la portée de firstCtrl est parent de l'secondCtrl portée:

function firstCtrl($scope){
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope){
    $scope.$emit('someEvent', [1,2,3]);
}

Répondu el 15 de Octobre, 2014 par SharpCoder (1167 Points )

Answer 6

24voto

DarkKnight Points 221

Plus de deux violons: (Non approche de service)

1) Pour Parent - Enfant, contrôleur à l'Aide de $scope de contrôleur de parent à émettre/événements de diffusion. http://jsfiddle.net/laan_sachin/jnj6y/

2) à l'Aide d' $rootScope à travers la non-automates. http://jsfiddle.net/VxafF/

Répondu el 7 de Octobre, 2012 par DarkKnight (221 Points )

Peut un contrôleur d'appeler un autre?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Peut un contrôleur d'appeler un autre?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: