angularjs - Angular.js $compile 返回 html 数组，但不是实际的 html

Question

我有以下代码：

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/有一个非工作示例来演示它。

Answer 1

尝试这个：

element.html(markup);
$compile(element.contents())(scope);

Answer 2

运行 $compile 服务返回的函数会为您提供 DOM 元素而不是 html。因此，您需要使用附加（或等效）将它们插入到您的页面中：

angular.element(element).append($compile(markup)(scope));

Answer 3

也许最简单的方法是使用硬编码模板而不是动态生成的模板

<div ng-app="myApp">
    <my-sample sample-data="'test'"></my-sample>
</div>

var app = angular.module('myApp', []);

app.directive('mySample', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            sampleData: '=sampleData'
        },
        template: "<input type='text'/> {{sampleData}} <br/>",
    };
});

小提琴

Answer 4

取决于应该编译什么样的数据，有时 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();
});

Answer 5

您只需要添加 jquery 即可使用“.html”并修复 ng-model 的命名