如何将AngularJS指令应用于ajax内容

我知道我可以apply到模板/templateURL，但目前的内容将从我的应用程序的另一个地方加载。

JSbin: http://jsbin.com/imuseb/1/

HTML

<html ng-app="app">
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  </head>
  <body>
    <div alert>here</div>
  </body>
</html>

JS代码:

var app = angular.module('app', []);
app.directive('alert', function (){
  return {
    link: function (scope, element, attrs) {
      element.on("click", function (){
        alert("here");
      });
    }
  };
});

$(function (){
   $("body").append("<div alert>here too</div>");
});

新的DOM必须能被angular应用访问，才能被正确编译。这里有一种方法(不是唯一的方法)。为了将新的DOM应用到应用程序的$rootScope，修改如下:

$(function (){
    $("body").append("<div alert>here too</div>");
});

app.run(function($rootScope){
    $rootScope.$apply($("body").append("<div editable>here too</div>"));
});

根据Angular文档:

$apply()用于在angular框架之外执行angular中的表达式。(例如从浏览器DOM事件，setTimeout, XHR或第三方库)。

如果你能从angular框架中加载额外的内容就更好了。查看ng-include

如果不能用它来做你需要的事情，你必须手动调用元素上的angular编译服务，编译它并使用$compile将它链接到作用域。

编译元素涉及DOM，因此如果可能的话，应该在自定义指令中完成。

相关内容

最新更新

热门标签：