Przypisywanie wielu kontrolerów w $ stateProvider.state

Question

Prawdopodobnie jest to łatwe pytanie dla zaawansowanych użytkowników kątowych, ale nie znalazłem tego problemu w sposób dobrze wyjaśniony.

Więc został restrukturyzacji mój kod, gdy zdałem sobie sprawę, mam dwa kontrolery w widoku, który nie jest problemem, gdy kontroler "ACtrl" jest binded przez $ stateProvider i kontroler "BCtrl" jest binded w widoku przez ng-kontroler. Ale gdy próbuję przypisać oboje w $ stateProvider tak:

$stateProvider.state('a.view', { 
    url: "/anurl", 
    views: { 
     'menuContent': { 
      templateUrl: "anUrlToMyTemplates", 
      controller: 'ACtrl', 'BCtrl' 
     } 
    } 
}); 

lub że:

$stateProvider.state('a.view', { 
    url: "/anurl", 
    views: { 
     'menuContent': { 
      templateUrl: "anUrlToMyTemplates", 
      controller: 'ACtrl', 
      controller: 'BCtrl' 
     } 
    } 
}); 

to nie będzie działać.

Wiem, że byłoby dobrym rozwiązaniem, aby zawartość kontrolerów była większa niż jeden, ale kontroler "ACtrl" jest również używany gdzie indziej, więc musiałbym powtórzyć się gdzie indziej. Jak mogę rozwiązać ten ...

Answer 1

Syntaxically, nie może pracować. To może (syntaxically) praca:

$stateProvider.state('a.view', { 
    url: "/anurl", 
    views: { 
     'menuContent': { 
      templateUrl: "anUrlToMyTemplates", 
      controller: ['ACtrl', 'BCtrl'] 
     } 
    } 
}); 

Ale angularjs używać ZERO lub ONE kontrolera przez DOMElement.

można przypisać CtrlA dla A widzenia:

$stateProvider.state('a.view', { 
    url: "/anurl", 
    views: { 
     'menuContent': { 
      templateUrl: "anUrlToMyTemplates", 
      controller: 'ACtrl' 
     } 
    } 
}); 

A potem do Twój A widok:

<div data-ng-controller="BCtrl"> 
    <!-- your view content --> 
</div> 

Powiedział, że dla celów projektowych kod jest poprawny sposób jest połączenie działania dwóch kontrolerów tylko w jednym, jeśli muszą kontrolować te same elementy szablonu. Jeśli kontrolują różne części szablonu, użyj jednego kontrolera dla jednej części lub kontrolera dla całego widoku, a innego dla konkretnej części:

<!-- your view controlled by ACtrl configured in route provider --> 
<div> 
    <!-- your view content, part A --> 

    <div data-ng-controller="BCtrl"> 
     <!-- your view content, part B --> 
    </div> 
</div> 

Answer 2

Splitu swój układ i użyć czegoś takiego:

.state('app.somestate', { 
      url : '/someurl', 
      views:{ 
       'menuContent': { 
        templateUrl: 'part1.html', 
        controller: 'ACtrl' 
       }, 
       'otherContent': { 
        templateUrl: 'part2.html', 
        controller: 'BCtrl' 
       }, 
       'someotherContent': { 
        templateUrl: 'part3.html', 
        controller: 'CCtrl' 
       } 
      } 
     })