Angular.js $编译返回数组的HTML而不是实际的HTML

我有以下代码：

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)); 
     } 
    }; 
});

而且我希望它产生的输入，有些跨度的Via范围和休息耦合。不过，我得到这个输出：

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

我也尝试了模板，在这里评论，分别然后注释掉的链接部分。这会生成输入和中断元素，但不会生成显示耦合模型输入sampleData的跨度。

我有一个非工作示例http://jsfiddle.net/KvdM/nwbsT/可以证明它。

来源

2013-07-26 XIII

试试这个：

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

来源

2013-07-26 13:51:15 AlwaysALearner

呈现输入，但不是{{sampleData}}工作。 – XIII

我将如何记录sampleData？ – XIII

{{sampleData}}不起作用，因为你写ng = model而不是ng-model :) – AlwaysALearner

运行由$ compile服务返回的函数将为您提供DOM元素而不是html。所以你需要使用附加（或同等学历）将它们插入到你的页面：

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

来源

2013-07-26 13:37:57

的命名已经显示了输入，但不会使{{的sampleData}}工作。 – XIII

如何替换元素的内容？这相当于增加了它。 –

可能只是将“append”更改为“replaceWith”（我没有尝试过） –

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

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

FIDDLE

来源

2013-07-26 13:46:51 zsong

它呈现输入，但不是{{sampleData}}更新。它不断显示测试。 – XIII

这是以HTML格式传入的数据。 – zsong

-1

取决于WHA t类型的数据应该被编译，有时候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-16 16:46:44

-1

你只需要添加使用“ html的” jQuery的固定NG-模型

来源

2016-06-11 22:24:35 Pedro

你是什么意思？你能提供一个jsfiddle或相关的代码示例吗？ – XIII

Angular.js $编译返回数组的HTML而不是实际的HTML

回答

相关问题