AngularJS + JQuery：如何獲取在angularjs中工作的動態內容

Question

我正在使用jQuery和AngularJS處理Ajax應用程序。

當我使用jQuery的html函數更新div的內容（其中包含AngularJS綁定）時，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>

我與ID #dynamicContent一個div裏面的動態內容，和我有一個刷新按鈕，將更新內容點擊刷新時該div的值。如果我不刷新內容，Increment按預期工作，但在刷新後，AngularJS綁定停止工作。

這可能在AngularJS中無效，但我最初使用jQuery構建應用程序，稍後開始使用AngularJS，所以我無法將所有內容都遷移到AngularJS。任何幫助在AngularJS中實現這個功能都非常感謝。

Answer 1

您需要先在HTML字符串上調用$compile，然後再將其插入到DOM中，這樣角纔有機會執行綁定。

在你的小提琴中，它看起來像這樣。

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

顯然，$compile必須注射到控制器中這個工作。

瞭解更多$compile documentation。

Answer 2

另一種解決方案的情況下，你就不用管了對動態內容

這工作，如果你沒有通過指令（即像在評論jsfiddles的例子）加載你的元素。

總結了自己的內容

包裹在一個div您的內容，這樣就可以，如果你使用的是JQuery的選擇它。你也可以選擇使用原生javascript來獲取你的元素。

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

使用角度噴油器

您可以使用下面的代碼來得到，如果你沒有一個$參考編譯。

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

摘要

原來的職位似乎假設你有一個$編譯參考得心應手。當你有參考資料時，顯然很容易，但我沒有，所以這是我的答案。前面的代碼

的

一個警告如果您使用的是帶有縮小場景中asp.net/mvc包，你會遇到麻煩，當你在釋放模式部署。麻煩來自Uncaught Error的形式：[$ injector：unpr]這是由縮小器與角度javascript代碼搞亂造成的。

這裏是彌補它方式：

更換prevous代碼段有以下過載。

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

在我拼湊起來之前，這給我造成了很多的傷痛。

Answer 3

加成@ jwize的回答

因爲angular.element(document).injector()是給錯誤injector is not defined 所以，我創建的功能，可以在DOM使用jQuery改變AJAX調用後運行或。

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