In Agular 1.5, wie kompiliert man das HTML einer Elternkomponente von einer Kindkomponente?

Question

Ich habe zwei eckige Komponenten: App-Menü und App-Menü. app-menu hat eine Liste von app-menueitem als Kinder, aber es gibt keine transclude.

App-menuitem

angular.module('app') 
    .component('appMenuitem', { 
     transclude: false, 
     controller: menuitemController, 
     require: { 
     parent: '^?app-menu' 
     }, 
     bindings: { 
     ... 
     groupradio: '@',   
     isactive: '<', // bind to active (just init) 
     ... 
     }, 
     templateUrl: 'angular/components/simple/menuitem/menuitem.html' 
    }); 

function menuitemController($rootScope, $scope, $element, $attrs) { 
    var ctrl = this; 

    //Default values 
    ctrl.$onInit = function() { 
     if(ctrl.isactive){ 
     ctrl.active = true; 
     }else{ 
     ctrl.active = false; 
     } 
     ctrl.selectRadioItem = function(){ 
      if(!ctrl.active){ 
      var currentMenu = this.parent.items.menu; 
      var levelMenu = this.parent.items.level; 
      for(var i = 0; i < currentMenu.length; i++){ 
       var currentMenuItem = currentMenu[i]; 
       if(currentMenuItem.groupradio === ctrl.groupradio){ 
        if(currentMenuItem.index === ctrl.index){ 
         currentMenuItem.isactive = true; 
        }else{ 
         currentMenuItem.isactive = false; 
        } 
        currentMenu[i] = currentMenuItem; 
       } 
      } 
      this.parent.items.menu = currentMenu; 
      console.dir(this.parent); //<-- updates are visible but the html did not change. 
      } 
      ... 

Wie Sie am Ende dieses Codes sehen können, konnte ich das übergeordnete Komponente App-Menü aus diesem Kind Komponente app-menuitem ändern, aber die html wird nie wieder kompiliert in diesem Fall. Jemand hat eine Idee?

Answer 1

Ich empfehle, die Werte der Eltern nicht direkt von Kindern zu ändern. Stellen Sie stattdessen eine Methode auf dem Controller des übergeordneten Elements bereit, die vom untergeordneten Element mit der erforderlichen Aktualisierung aufgerufen wird, und lassen Sie das übergeordnete Element die Aktualisierungen verarbeiten. Dadurch können Sie sowohl teurere Bindungen vermeiden als auch die Kontrolle über die Eigenschaften eines Controllers im Controller behalten (so dass Sie die Fehlerquelle in Ihrem Code leichter finden). Es ist auch mehr testbar, wenn Sie Ihren Code testen.

Kleiner Tipp:. Für Testzwecke, wenn etwas, nachdem Sie das Modell nicht aktualisiert aktualisieren , können Sie immer versuchen, $ Umfang zu tun $() nach dem Update anwenden und sehen, ob ein $digest es Timing Problem. Sie nicht in Produktion verwenden, wenn Sie zu haben - es ist teuer und leicht Zeit Ausnahmen Ursache laufen