Angular.js $ biên dịch lợi nhuận mảng html nhưng không thực tế html

Question

Tôi có đoạn mã sau:

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

Và tôi mong chờ nó để tạo ra một đầu vào, một số khoảng thời gian đó là kết qua phạm vi và nghỉ ngơi. Tuy nhiên tôi nhận được kết quả này:

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

Tôi cũng đã cố gắng mẫu, trong bình luận ở đây, riêng biệt và sau đó cho ý kiến ​​ra phần liên kết. Điều đó tạo ra các phần tử đầu vào và ngắt nhưng không phải là khoảng thời gian cho thấy mẫu dữ liệu đầu vào được ghép đôiData.

Tôi có mẫu không hoạt động tại http://jsfiddle.net/KvdM/nwbsT/ để minh họa.

Answer 1

Hãy thử điều này:

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

Answer 2

Chạy hàm trả về bởi dịch vụ biên dịch $ cung cấp cho bạn các phần tử DOM thay vì html. Vì vậy, bạn cần phải chèn chúng vào trang web của bạn sử dụng thêm (hoặc tương đương):

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

Answer 3

Có lẽ cách đơn giản nhất là sử dụng một mẫu mã hóa cứng chứ không phải là một động lực tạo ra một

<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

Answer 4

Phụ thuộc vào wha t loại dữ liệu cần được biên dịch, một số lần Angular trả về một loại nút nhận xét.

Nút liên quan mà chúng tôi muốn sử dụng là next() (anh chị em đầu tiên của nó).

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

Bạn chỉ cần để thêm jquery để sử dụng ".html" và cố định việc đặt tên của ng-mô hình