John Lindquistによるこの youtube チュートリアルに従おうとしました。彼はディレクティブをコンポーネントとコンテナーに分類して説明しています。
そこで、さまざまなアイテム (テキストエリア、画像、ビデオなど) を保持するコンテナー (スライド) を用意しようとしましたが、私の例はより動的です。
彼の例は次のようなものでした：
<panel title="{{title}}">
<element text="{{body}}"></element>
</panel>
しかし、私のものはもっとこのようなものです：
<slide ng-repeat="slide in slides" slide-id="{{slide.id}}">
<component
element="component"
type="{{component.type}}"
ng-repeat="component in slide.components"
>
</component>
</slide>
コンポーネント ディレクティブ (この SO questionから取得したもの) は、タイプを取得してテンプレートを正しいディレクティブに変更するディレクティブです。たとえば、エディターがこれを変更した場合は、次のようになります。
<component
element="component"
type="{{component.type}}"
ng-repeat="component in slide.components"
>
</component>
これに：
<component
element="component"
editor
ng-repeat="component in slide.components"
>
</component>
そして、エディター ディレクティブは、最後のテンプレートを次のように変更することで機能します。
<div
contenteditable="true"
class="editor text-content"
>
{{element.content.text}}
</div>
しかし、コンポーネントディレクティブがまったく実行されない理由がわかりません。分離されたスコープに何か問題があると思います。何かを理解していない可能性があります。
Plunker での作業例。
アップデート：
不足している制限を指摘してくれたMarco Alvesに感謝します。例を最初にリンク関数とコンパイル関数のどちらで記述したかは覚えていませんが、リンク関数を使用したソリューションは次のように見える可能性があるため、コンパイル関数を使用する必要があります。動作していますが、コンソールを開いた後、奇妙なエラーが表示されます（少なくとも私にとっては奇妙です）：
エラー: InvalidCharacterError: DOM Exception 5
エラー: XML 名などで、無効または不正な文字が指定されました。
x.extend.attr (jquery.min.js:5:4051)
で Function.x.extend.access (jquery.min.js:4:5847)
で x.fn.extend.attr (jquery.min.js ) :5:715)
リンク (component-directive.js:7:11)
で nodeLinkFn (angular.js:4774:13)
で angular.js:4914:15
で nodeLinkFn (angular.js:4768:24)
で
angular.js:9782:11で.js:4913:13
(angular.js:7303:59)<div contenteditable="true" class="ng-scope editor text-content ng-binding" element="component" type="" ng-repeat="component in slide.components" editor="">angular.js:6173
(匿名関数) angular.js:6173
(匿名関数) angular.js:5219
nodeLinkFn angular .js:4777
(匿名関数) angular.js:4914
nodeLinkFn angular.js:4768
(匿名関数) angular.js:4913
(匿名関数) angular.js:9782
ラップされたコールバック angular.js:7303
ラップされたコールバック angular.js:7303
(匿名関数) angular.js:7340
Scope.$eval angular .js:8685
Scope.$digest angular.js:8548
Scope.$apply angular.js:8771
done angular.js:10004
completeRequest angular.js:10180
xhr.onreadystatechange
Marco Alvesからのこの回答を確認してください。
したがって、コンポーネント ディレクティブは次のようになります。
app.directive('component', ['$compile', function($compile){
return {
restrict: "E",
compile:function(tElement, tAttrs){
var el = tElement[0];
if(el.getAttribute('type')){
el.removeAttribute('type');
el.setAttribute(tAttrs.type,'');
return function(scope){
$compile(el)(scope);
};
}
}
};
}]);
これに関する問題は、このplunker の例では問題なく動作するにもかかわらず、コンポーネント ディレクティブがまだコンパイルされないことです。
事前に感謝します。