加載Angularjs並執行它們

Question

我創建ASP MVC應用程序， 裏面我創建了一個按鈕使用jQuery AJAX調用， 的HTML數據中有一個角度表述，但這些加載HTML數據我的問題我們如何執行使用AJAX加載的Angular表達式我知道我們需要在Angular之外使用$ compile，所以我需要在Angular之外進行$ compile編譯，怎麼樣 ？ 謝謝

Answer 1

我能弄明白，找到答案後，研究和更多的實驗： 這裏是加載動態HTML後的溶液 （假設使用Ajax） 我需要使用$編譯和調用$應用之外的角度看下面的演示更多的澄清：

var _app = angular.module("myapp",[]); 
 
var _ctrl = _app.controller("myctrl", ['$scope','$window', function ($scope, $window) { 
 
$scope.selectedFood = 1; 
 

 
}]) 
 
function add() 
 
    { 
 
     angular.injector(['ng']).invoke(['$compile', function ($compile) { 
 
      
 
      var sel = 'div[ng-controller="myctrl"]'; 
 

 
      var _html = "<label>{{testing}}</label><select ng-model='selectedFood' ><option value='0'>Banana</option><option value='1'>Apple</option><option value='2'>Orange</option><option value='3'>Tomato</option></select>"; 
 
      //angular.element(document.getElementById('test1')).scope().loaditems() 
 
      var scope = angular.element(document.getElementById("test1")).scope(); 
 
      
 
      $('#dvLoad').html($compile(_html)(scope)); 
 
      setTimeout(function(){ scope.$apply(); }); 
 
       
 
     }]); 
 
    }

<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.4.9/angular.min.js"></script> 
 
<div id="test" ng-app="myapp"> 
 
    <div id="test1" ng-controller="myctrl"> 
 

 
    <div id="dvLoad"> 
 
     Press the button to load Food List 
 
     <input type="button" onclick="add();" value="Load" /> 
 
    </div> 
 

 

 

 
    </div> 
 
</div>

Answer 2

好吧，要使用$編譯你需要一個控制器beacuase $ compile需要$ scope對象。

例如：

angular.module('app',[]) 
.controller('MainController', ['$scope', '$compile', function($scope, $compile){ 
    ...do stuff... 
}])