2017-07-05 15 views
0

私は実行時にメニュー項目を追加したり変更したりできるようにプラグインのメカニズムを持っている角型アプリケーションを持っています。これを行うには、私のような、プラグインは自分で登録することができ、サービスを持っている:コンポーネントを動的に角度をつけて含む

MenuService.addItem(
    "/main/foo", 
    "bar", 
    { 
     title : "Bar", 
     templateUrl : "foo/bar/templates/bar.html", 
     controller : "BarController", 
     controllerAs : "bar", 
     visible : true, 
     [...] 
    } 
); 

し、私は取得してアイテムを反復処理するためのディレクティブを持っている特定の階層レベルを追加します。内部的には、これはルートを登録するには$ルートを使用し、テンプレートは、このような構造をレンダリングすることができます。

<li menu-item path="/main"> 
    <a href="{{item.path}}">{{item.title}}</a> 
    <ul ng-if="items.children.length>0"> 
     <li menu-item path="{{item.path}}"> 
     </li> 
    </ul> 
</li> 

これはすべての非常に簡単ですし、正常に動作します。今、同様の方法でビュー全体を含めることもできます。およそ次のように:

<div include-components path="/main/foo"> 
</div> 

私はこのパスで登録された項目を反復処理すると、いずれかのディレクティブが上にあるノードを複製したり設定し、右テンプレートとコントローラと子ノードを追加したいと思います。上記のいずれかが登録されているように一つだけのアイテムがある場合、結果のDOMは次のようになります。

<div 
    include-components 
    path="/main/foo" 
    ng-controller="BarController" 
    ng-include="...template.html"> 

    [included template+controller render here] 

</div> 

または(子要素とを):

<div include-components path="/main/foo"> 
    [first registered template /w controller] 
    [second registered template /w controller] 
    [...] 
</div> 

私の現在の試みは一種の次のようになります。

angular.module("angular-plugin").directive(
    "includeComponents", 
    function(MenuService,$route,$templateCache) { 
     console.log($route); 
     return { 
      transclude: 'element', 
      scope: { 
       path : "@" 
      }, 
      link: function(scope, el, attr, ctrl,transclude) { 
       var items = MenuService.get(scope.path); 
       items.forEach(function(each){ 
        [... what?] 
       }); 
      } 
     } 
    } 
}); 

は、私はそのループ内の異なる多くのことを試してみました...しかし、私は初期化するには、その項目には、コントローラを取得するには、はるかに少ないのテンプレート表示を行うことができていませんでした。私はngViewのソースコードを見ていました。これは本当に似たようなことをしているはずですが、動作させることができませんでした。何か案は?

答えて

0

これで、ngViewを見てもっと時間を費やしました。私は以下の指示を理解しました。これはかなり効果的です。不足しているものはありますか?後で何かクリーンアップをしなければならないのですか?

angular.module("foobar").directive(
    "includeComponents", 
    function(PluginMenuService,$route,$templateCache,$controller,$compile) { 
     console.log($route); 
     return { 
      scope: { 
       path : "@" 
      }, 
      link: function(scope, el, attr, ctrl,transclude) { 
       var items = PluginMenuService.get(scope.path); 
       if(items.length > 0) { 
        items.forEach(
         function(each) { 
          templ = $templateCache.get(each.templateUrl); 
          var child = el.append(templ); 
          var controller = $controller(each.controller, {}); 
          var link = $compile(child.contents()); 

          childScope = scope.$new(); 

          childScope[each.controllerAs] = controller; 
          childScope["component"] = each; 
          child.data('$ngControllerController', controller); 

          link(childScope); 
         } 
        ); 
       } 
      } 
     } 
    }); 
関連する問題