0
A
答えて
3
link
関数は、あなたが考えているようにHTMLを返すためのものではありません。スコープがディレクティブ要素にリンクされている場合、角コンパイルされたDOMを制御することを基本的に意図しています。あなたは指示のtemplate/templateUrl
オプション以上のHTMLを持つことができます。条件付き要素を使用する場合はng-if
を使用します。
指令
.directive('jobTemplate', function() {
return {
restrict: 'AE',
replace: true,
template: '<p>'+
'<span ng-if="job.JobStatus == \'Created\'">{{job.id}} was created.</span>'+
'<span ng-if="job.JobStatus == \'Processing\'">{{job.id}} is currently processing.</span>'+
'</p>',
link: function(scope, element, attrs) {}
};
})
0
あなたが実装されている方法は、あなたがDOMの一部を追加または削除条件ままにする必要がありcorrect..butでこのコードhttps://plnkr.co/edit/cpdAqWN0SeUx5Gy9CQkR?p=preview
app.directive('jobTemplate', function($compile){
return {
restrict: 'AE',
replace: true,
link: function(scope,element, attrs) {
console.log(element)
var JobStatus = scope.job.JobStatus;
var text = "<p>";
if(JobStatus === 'Created'){
text += "{{job.id}} was created."
}
else if(JobStatus === 'Processing'){
text += "{{job.id}} is currently processing."
}
text += "</p>";
element.html(text);
$compile(element.contents())(scope);
}
};
})
関連する問題
- 1. AngularJS指令 - ng-repeat内のテンプレート置換
- 2. AngularJS指令:テンプレートをコンパイルしてスコープを見る
- 3. Angularjsコントローラ指令
- 4. AngularJS指令値
- 5. は、YouTubeのAngularJS指令
- 6. ng-transcludeを含むAngularJs指令テンプレートはコンパイルできません
- 7. AngularJS指令テンプレートでJavascriptを実行しない
- 8. 一見単純な私は
- 9. ブートストラップモードのための単純な角度指令
- 10. AngularJSのng-repeat指令でテンプレートを動的に表示していますか?
- 11. AngularJS:指令の縮小問題
- 12. AngularJS指令の完全なリスト?
- 13. AngularJSフォーム検証指令$ setValidity on element
- 14. 簡単な角度指令
- 15. 単純なXSLTテンプレート
- 16. 角度指令テンプレートの不明なスコープ
- 17. AngularJS指令のアニメーションイベントが起動しない
- 18. 単純なテンプレート変換
- 19. Angularjs指令は時計を取り外しますか?
- 20. 指令でng-clickを追加するAngularJS
- 21. AngularJS:同じ指令で消毒してリンカーできる?
- 22. コントローラからのangularjs指令にオブジェクトを渡す
- 23. AngularJS:指令 - ここで私が作成したディレクティブがあります引用符
- 24. AngularJS ng-keydown指令は<input>コンテキストでのみ動作しますか?
- 25. 同じファイル内にある場合、指令のAngularjsサービスは不明です
- 26. 私は単純なテーブル持って、指定した範囲
- 27. djangoテンプレートのquerysetの単純な順位
- 28. Expressテンプレートまたは純粋なHTMLのAngularJS?長所と短所?
- 29. Spring Web App - 単純なJDBCテンプレートのアドバイス?
- 30. テンプレート内のdjango単純な関係
を試してみてください'ng-if'を使っているので、' job'値がajaxによって読み込まれると問題はありません。 –
これも指示の範囲内で行うことができます。以前私はwordpress SPAで作った。長すぎるディレクティブなので、すべてのことは言い表せませんが、** scopeを使用して管理しました。$ watch( '$ viewContentLoaded'、function(){})**内のディレクティブです。 –
$ viewContentLoadedが読み込まれたウォッチはうまくいきません。あなたは 'job'の上にウォッチを置く必要がありますが、それは' $ watch'をコードに入れるのは悪い習慣です。ウォッチャーを避けるようにしてくださいそのコードはもっとクリーナーになります.. –