加载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... 
}])