7

次のコードがあります。

app.directive('mySample', function($compile) {
    return {
        //template:"<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>"
        link: function(scope, element, atts, controller) {
            var markup = "<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>";  
            angular.element(element).html($compile(markup)(scope));
            console.log($compile(markup)(scope));
        }
    };
});

そして、スコープとブレークを介して結合された入力、いくつかのスパンを生成することを期待しています。ただし、次の出力が得られます。

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

また、ここのコメントでテンプレートを個別に試してから、リンク部分をコメントアウトしました。これにより、入力要素とブレーク要素が生成されますが、結合されたモデル入力 sampleData を示すスパンは生成されません。

http://jsfiddle.net/KvdM/nwbsT/に、それを示す非動作サンプルがあります。

4

5 に答える 5

15

これを試して：

element.html(markup);
$compile(element.contents())(scope);
于 2013-07-26T13:51:15.083 に答える
10

$compile サービスによって返された関数を実行すると、html ではなく DOM 要素が得られます。したがって、追加 (または同等のもの) を使用してそれらをページに挿入する必要があります。

angular.element(element).append($compile(markup)(scope));
于 2013-07-26T13:37:57.950 に答える
-1

「.html」を使用するためにjqueryを追加し、ng-modelの命名を修正する必要がありました

于 2016-06-11T22:24:35.030 に答える
-1

コンパイルするデータの種類に応じて、Angular がコメント ノード タイプを返す場合があります。

使用したい関連ノードはnext()(その最初の兄弟) です。

var tpl = '<div class="myWidget" ng-include="'templates/myWidget.html'"></div>;
var _myWidget = $compile(tpl)(scope);
var myWidget = null;

scope.$on('$includeContentLoaded', function () {
    myWidget = _myWidget.next();
});
于 2014-09-16T16:46:44.177 に答える