AngularJS + JQuery: วิธีรับเนื้อหาแบบไดนามิกที่ทำงานใน angularjs

ฉันกำลังทำงานกับแอพ Ajax โดยใช้ทั้ง jQuery และ AngularJS

เมื่อฉันอัปเดตเนื้อหา (ซึ่งมีการโยง AngularJS) ของ div โดยใช้htmlฟังก์ชันของ jQuery การเชื่อม AngularJS จะไม่ทำงาน

ต่อไปนี้เป็นรหัสของสิ่งที่ฉันพยายามทำ:

$(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>

ฉันมีเนื้อหาแบบไดนามิกภายใน div ที่มี ID #dynamicContentและฉันมีปุ่มรีเฟรชที่จะอัปเดตเนื้อหาของ div นี้เมื่อคลิกรีเฟรช การเพิ่มจะทำงานตามที่คาดไว้หากฉันไม่รีเฟรชเนื้อหา แต่หลังจากรีเฟรชการเชื่อม AngularJS จะหยุดทำงาน

สิ่งนี้อาจไม่ถูกต้องใน AngularJS แต่ในตอนแรกฉันสร้างแอปพลิเคชันด้วย jQuery และเริ่มใช้ AngularJS ในภายหลังดังนั้นฉันจึงไม่สามารถย้ายข้อมูลทั้งหมดไปยัง AngularJS ได้ ความช่วยเหลือใด ๆ ในการทำงานนี้ใน AngularJS ได้รับการชื่นชมอย่างมาก

คุณต้องเรียก$compileใช้สตริง HTML ก่อนที่จะแทรกลงใน DOM เพื่อให้เชิงมุมได้รับโอกาสในการเชื่อมโยง

ในซอของคุณมันจะเป็นแบบนี้

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

แน่นอน$compileต้องฉีดเข้าไปในคอนโทรลเลอร์ของคุณเพื่อให้สิ่งนี้ทำงานได้

อ่านเพิ่มเติมในเอกสาร$compile

อีกวิธีหนึ่งในกรณีที่คุณไม่สามารถควบคุมเนื้อหาแบบไดนามิกได้

วิธีนี้ใช้ได้ผลถ้าคุณไม่ได้โหลดองค์ประกอบของคุณผ่านคำสั่ง (เช่นในตัวอย่างใน jsfiddles ที่แสดงความคิดเห็น)

สรุปเนื้อหาของคุณ

รวมเนื้อหาของคุณใน div เพื่อให้คุณสามารถเลือกได้หากคุณกำลังใช้ JQuery คุณยังเลือกที่จะใช้จาวาสคริปต์ดั้งเดิมเพื่อรับองค์ประกอบของคุณ

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

ใช้ Angular Injector

คุณสามารถใช้รหัสต่อไปนี้เพื่ออ้างอิงถึง $ compile หากคุณไม่มี

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

สรุป

โพสต์ต้นฉบับดูเหมือนว่าคุณมีข้อมูลอ้างอิง $ compile ที่มีประโยชน์ เห็นได้ชัดว่ามันง่ายมากเมื่อคุณมีข้อมูลอ้างอิง แต่ฉันไม่ได้เป็นคำตอบสำหรับฉัน

หนึ่งข้อแม้ของรหัสก่อนหน้านี้

หากคุณกำลังใช้บันเดิล asp.net/mvc กับ minify สถานการณ์คุณจะประสบปัญหาเมื่อคุณปรับใช้ในโหมดรีลีส ปัญหามาในรูปแบบของ Uncaught Error: [$ injector: unpr] ซึ่งเกิดจาก minifier ที่ยุ่งกับรหัส javascript เชิงมุม

นี่คือวิธีการแก้ไข :

แทนที่ข้อมูลโค้ดทั่วไปด้วยโอเวอร์โหลดต่อไปนี้

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

สิ่งนี้ทำให้ฉันเสียใจมากก่อนที่จะปะติดปะต่อเข้าด้วยกัน

เพิ่มเติมจากคำตอบของ @jwize

เนื่องจากangular.element(document).injector()ให้ข้อผิดพลาดinjector is not defined ดังนั้นฉันจึงได้สร้างฟังก์ชันที่คุณสามารถเรียกใช้หลังจากการโทร AJAX หรือเมื่อ DOM ถูกเปลี่ยนโดยใช้ 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();
                    }]);
            }

        }

ใช้มันโดยผ่านตัวเลือกขององค์ประกอบใหม่ แบบนี้

compileAngularElement( '.user' ) ;