1

ページのhtmlに新しいものを挿入しようとしています。この div は、Angular テンプレートからコンテンツを取得する必要があります。

私はこれを試しましたが、うまくいきません。

var tpl = $compile( '"<div ng-include="template.tpl.html"></div>"' )( scope );
document.body.appendChild(tpl);

tpl は null を返します。

4

1 に答える 1

2

そんな誘惑に負けないでください。jQuery を扱って Angular に来るとき、すべてに文字列を使用しようとする衝動を感じ、appendTo、prepend、replaceWith を使用することを知っています。

ディレクティブが最善の策であり、jQuery を汚す必要はありません。

app.directive('includeIt', function(){
  return { 
    restrict: 'A',
    scope: {template:'=includeIt'},
    template: '<div ng-include="template"></div>'
  };
});

app.controller('Ctrl', function(){
   this.templates = ['template1.tpl.html','template2.tpl.html'];
});

次に、HTMLでディレクティブを使用します

<div ng-controller="Ctrl as ctrl">
  <div ng-repeat="template in ctrl.templates" include-it="template"></div>
</div>

このようにして、すべての「テンプレート」を自動的に含めることができ、jQuery に触れることなく DOM に追加されます。実際の動作はこちらhttp://plnkr.co/edit/WFEcB1QJlD9D98rC57J9?p=preview

于 2014-03-28T16:57:21.053 に答える