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

回答

相關問題