Freigabe des Bereichs in verschiedenen Ansichten mit benutzerdefinierten Controllern

Question

Ich habe das nächste Problem und ich würde gerne eine Lösung finden, oder wenn ich das tun sollte, wie ich bin.

Ich habe folgende ui-Router-Konfiguration:

$stateProvider.state('ListCounterparties', { 
    url:"/counterparties", 
    data: { NavMenuItem : 'Counterparties/Desks' }, 
    views: { 
     '' : { 
      templateUrl:"./app/module_Counterparties/templates/ListCounterparties.html", 
      controller:"CounterpartiesControllerCtrl" 
     }, 
     'deskLists@ListCounterparties' : { 
      templateUrl : './app/module_Counterparties/templates/DesksDualListTemplate.html', 
      controller:'DesksControllerCtrl' 
     } 
} 

Die erste, unnamed Ansicht, eine Tabelle hat, von dem ich eine Zeile und dann ein Verfahren zur Herstellung einer Dual-Liste zu füllen aus der aufgerufen wird auswählen zweite Ansicht.

Bis jetzt hatte ich beide in der gleichen Steuerung, aber die Steuerung wird zu groß und ich entschied, dass ich sie trennen musste.

das Verfahren die Dual-Listen in 'deskLists @ ListCounterparties' in DesksControllerCtrl definiert ist, aufzufüllen aber es sollte in CounterpartiesControllerCtrl, als das Ereignis der Zeilenauswahl in diesem Controller bezeichnet werden.

Das Problem besteht darin, dass die Bereiche nicht freigegeben sind und die Methode für die unbenannte Ansicht nicht zugänglich ist.

Zugriff auf den Umfang in DesksControllerCtrl Ich konnte sehen, dass die $ parent Eigenschaft Zugriff zweimal ich zum CounterpartiesControllerCtrl bekommen, aber ich weiß nicht dünn, das ist eine ideale Sache zu tun.

Vielen Dank im Voraus.

Answer 1

Gemeinsame Nutzung von Daten, Methoden usw. zwischen mehreren Controllern die Angular Weise wären Service (s) zu erstellen. Das heißt, Sie erstellen z. ein Service, der alle Ihre Daten enthält und ein anderes, das Funktionalität für mehrere Controller bietet. Dann nur inject sich in Ihrem Controller:

var myApp = angular.module('myApp', []); 
 

 
myApp.factory('myGlobalData', function() { 
 
    return { 
 
    data: 1 
 
    }; 
 
}); 
 

 
myApp.factory('myService', function(myGlobalData) { 
 
    return { 
 
    increment: function() { 
 
     myGlobalData.data++; 
 
    } 
 
    }; 
 
}); 
 

 
myApp.controller('MyCtrlA', function($scope, myGlobalData, myService) { 
 
    $scope.myGlobalData = myGlobalData; 
 
    $scope.myService = myService; 
 
}); 
 

 
myApp.controller('MyCtrlB', function($scope, myGlobalData, myService) { 
 
    $scope.myGlobalData = myGlobalData; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 

 
    <p ng-controller="MyCtrlA"> 
 
    {{myGlobalData.data}} 
 
    </p> 
 

 
    <p ng-controller="MyCtrlB"> 
 
    {{myGlobalData.data}} 
 
    </p> 
 

 
    <div ng-controller="MyCtrlA"> 
 
    <button ng-click="myService.increment()">Increment data in myGlobalData service</button> 
 
    </div> 
 

 
</div>