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 服务返回的函数会为您提供 DOM 元素而不是 html。因此，您需要使用附加（或等效）将它们插入到您的页面中：

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

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

<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/>",
    };
});

小提琴

于 2013-07-26T13:46:51.490 回答
-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 回答
-1

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

于 2016-06-11T22:24:35.030 回答