Agular 1.5では、子コンポーネントから親コンポーネントのhtmlをコンパイルする方法は？

Question

私はapp-menuitemとapp-menuの2つの角度成分を持っています。 app-menuには子としてのapp-menuitemのリストがありますが、transcludeはありません。

のApp-メニュー項目

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. 
      } 
      ... 

あなたは、このコードの最後に見ることができるように、私はこの子コンポーネントアプリ-メニュー項目から親コンポーネントアプリメニューを変更するために管理しますが、HTMLは再びコンパイルされることはありませんこの場合。誰かがアイデアを持っていますか？

Answer 1

子どもから親の値を直接変更しないことをお勧めします。代わりに、必要な更新で子から呼び出された親のコントローラ上にメソッドを公開し、親が更新を処理するようにします。 これにより、コントローラのプロパティの制御を保持するだけでなく、より高価なバインディングを回避することができます（したがって、コード内のエラーソースを簡単に見つけることができます）。あなたのコードをテストしているならば、さらにテスト可能です。

小ヒント：あなたがモデルを更新 後に何かが更新されない場合は、テストの目的のために、あなたは常に$スコープを行うために試みることができる$（適用） 更新後と$digestタイミングがありますかどうかを確認問題。あなたがする必要がある場合を除きは 生産に使用しないでください - それはコストがかかり、データバインディングを使用しないのはなぜ簡単に実行 時例外