Angularjs：データを含むビューで動的にディレクティブをロードする

Question

私はangularjsで動的フレームワークを作成しようとしています。セクションにはwebapiがロードされます。このセクションには、使用するディレクティブに関するデータと、そのディレクティブで使用する必要があるデータが格納されます。私が送るデータは次のようになります。

[ 
    { 
     id: "section1", 
     directive: "<my-directive></my-directive>", 
     content: { 
      title: "This is a title", 
      text: "This is a text" 
     } 
    }, 
    { 
     id: "section2", 
     directive: "<my-other></my-other>", 
     content: { 
      title: "This is another title", 
      list: ["This is a text", "This is another text"] 
     } 
    } 
] 

このデータを読み込むと、$ compileで要素に変換されます。

angular.forEach($sections, (value, key):void => { 
    value.directive = $compile(value.directive)($scope); 
} 

だから私は実際にこのように、ビューでこのデータをロードすることができますすべての

<div ng-repeat="section in sections"> 
    {{section.directive}} 
</div> 

まず、これが私の見解では表示されませんので、私はこれをどのように修正するのですか？ それから私には2番目の問題があります。実際にこのディレクティブをビューにロードすると、このディレクティブで使用するデータにどのようにアクセスできますか？

angular.forEach($sections, (value, key):void => { 
    value.directive = $compile(value.directive)($scope); 
    var parent = angular.element('#sectionsparent'); //The parent element has this id 
    parent.append(value.directive); 
} 

セクション要素が現れ、この方法で、私はディレクティブの内側にロードされるべきデータにアクセスすることはできません：私はsections.Thisに追加idは、私が試したものです持っています。

ご協力いただきありがとうございます。詳細情報が必要な場合はお知らせください。

EDIT：ディレクティブが最終的にロードされると、私はそのセクションに所属するデータにアクセスできるようにしたい

。だから我々は、サンプルデータの最初の部分を取るならば、私はディレクティブのテンプレートに次の操作を実行できるようにしたい：

<!-- This file is myDirectiveTemplate.hmtl --> 
<div id="{{id}}> 
    <h1>{{title}}</h1> 
    <p>{{text}}</p> 
</div> 

私はviewmodelのオブジェクトを介してこれらのプロパティにアクセスする必要がある場合、私は気にしませんしたがって、{{id}}の代わりに{{vm.id}}になります。しかし、実際にデータを取得するためにテンプレート内に関数呼び出しを持たないほうがいいです。

Answer 1

いいえ。これを達成する別の方法があるかもしれないし、おそらくディレクティブの代わりにインクルードを使うかもしれませんが、ここでは少なくとも一つの方法があります。

$compileとappendの2つ目のルートに従うこともできますが、アイソレートスコープのコンテンツにhtml属性を渡し、セクションを追加した新しい$スコープでバインドする必要があります。 （また、最初にレンダリングされた後にDOMを照会するように$タイムアウトをラップする必要があります）。

var app = angular.module('app', []); 
 
app.controller('AppCtrl', function($scope, $compile, $timeout) { 
 
    $scope.sections = [ 
 
     { 
 
      id: "section1", 
 
      directive: "my-directive", 
 
      content: { 
 
       title: "This is a title", 
 
       text: "This is a text" 
 
      } 
 
     }, 
 
     { 
 
      id: "section2", 
 
      directive: "my-other", 
 
      content: { 
 
       title: "This is another title", 
 
       list: ["This is a text", "This is another text"] 
 
      } 
 
     } 
 
    ]; 
 
    
 
    // Need to timeout so rendering occurs and we can query the DOM. 
 
    $timeout(() => { 
 
    angular.forEach($scope.sections, (section) => { 
 
     let newScope = $scope.$new(); 
 
     newScope.content = section.content; 
 
     let dir = section.directive; 
 
     let compiled = $compile(`<${dir} content="content"></${dir}>`)(newScope); 
 
     let parent = angular.element(document.querySelector('#' + section.id)); 
 
     parent.append(compiled); 
 
    }); 
 
    }); 
 
}); 
 

 
app.directive('myDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: {content: '='}, 
 
    template: `<div> 
 
     <h1>{{content.title}}</h1> 
 
     <p>{{content.text}}</p> 
 
     </div>`, 
 
    }; 
 
}); 
 

 
app.directive('myOther', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: {content: '='}, 
 
    template: `<div> 
 
     <h1>{{content.title}}</h1> 
 
     <ul> 
 
      <li ng-repeat="item in content.list">{{item}}</li> 
 
     </ul> 
 
     </div>`, 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="AppCtrl"> 
 
    <div ng-repeat="section in sections" id="{{section.id}}"></div> 
 
</div>