AngularJS + JQuery: Cách tải nội dung động hoạt động trong anglejs

Tôi đang làm việc trên một ứng dụng Ajax sử dụng cả jQuery và AngularJS.

Khi tôi cập nhật nội dung (chứa liên kết AngularJS) của một div bằng cách sử dụng htmlhàm của jQuery , liên kết AngularJS không hoạt động.

Sau đây là mã những gì tôi đang cố gắng thực hiện:

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

Tôi có nội dung động bên trong một div có ID #dynamicContentvà tôi có một nút làm mới sẽ cập nhật nội dung của div này khi nhấp vào làm mới. Phần tăng dần hoạt động như mong đợi nếu tôi không làm mới nội dung, nhưng sau khi tôi làm mới, liên kết AngularJS ngừng hoạt động.

Điều này có thể không hợp lệ trong AngularJS, nhưng ban đầu tôi đã xây dựng ứng dụng với jQuery và bắt đầu sử dụng AngularJS sau đó nên tôi không thể di chuyển mọi thứ sang AngularJS. Bất kỳ sự trợ giúp nào để làm việc này trong AngularJS đều được đánh giá rất cao.

Bạn cần gọi $compilechuỗi HTML trước khi chèn nó vào DOM để góc có cơ hội thực hiện liên kết.

Trong trò chơi của bạn, nó sẽ giống như thế này.

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

Rõ ràng, $compilephải được tiêm vào bộ điều khiển của bạn để điều này hoạt động.

Đọc thêm trong $compile tài liệu .

Một giải pháp khác trong trường hợp bạn không có quyền kiểm soát nội dung động

Điều này hoạt động nếu bạn không tải phần tử của mình thông qua một chỉ thị (ví dụ như trong ví dụ trong jsfiddles đã nhận xét).

Kết thúc nội dung của bạn

Gói nội dung của bạn trong một div để bạn có thể chọn nó nếu bạn đang sử dụng JQuery . Bạn cũng có thể chọn sử dụng javascript gốc để lấy phần tử của mình.

<div class="selector">
    <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter>
</div>

Sử dụng Angular Injector

Bạn có thể sử dụng mã sau để nhận tham chiếu đến $ compile nếu bạn không có.

$(".selector").each(function () {
    var content = $(this);
    angular.element(document).injector().invoke(function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    });
});

Tóm lược

Bài đăng ban đầu dường như giả sử bạn có một tài liệu tham khảo $ compile hữu ích. Rõ ràng là dễ dàng khi bạn có tài liệu tham khảo, nhưng tôi đã không nên đây là câu trả lời cho tôi.

Một thông báo trước của mã trước

Nếu bạn đang sử dụng gói asp.net/mvc với kịch bản minify, bạn sẽ gặp rắc rối khi triển khai ở chế độ phát hành. Rắc rối xảy ra dưới dạng Lỗi chưa suy nghĩ: [$ injectionor: unr] gây ra bởi trình thu nhỏ gây nhầm lẫn với mã javascript góc cạnh.

Đây là cách để khắc phục nó :

Thay thế đoạn mã trước bằng đoạn mã quá tải sau.

...
angular.element(document).injector().invoke(
[
    "$compile", function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    }
]);
...

Điều này gây ra rất nhiều đau buồn cho tôi trước khi tôi ghép nó lại.

Bổ sung cho câu trả lời của @ jwize

Vì angular.element(document).injector()đã đưa ra lỗi injector is not defined Vì vậy, tôi đã tạo một hàm mà bạn có thể chạy sau khi gọi AJAX hoặc khi DOM được thay đổi bằng jQuery.

  function compileAngularElement( elSelector) {

        var elSelector = (typeof elSelector == 'string') ? elSelector : null ;  
            // The new element to be added
        if (elSelector != null ) {
            var $div = $( elSelector );

                // The parent of the new element
                var $target = $("[ng-app]");

              angular.element($target).injector().invoke(['$compile', function ($compile) {
                        var $scope = angular.element($target).scope();
                        $compile($div)($scope);
                        // Finally, refresh the watch expressions in the new element
                        $scope.$apply();
                    }]);
            }

        }

sử dụng nó bằng cách chỉ chuyển bộ chọn của phần tử mới. như thế này

compileAngularElement( '.user' ) ;