如何将一个angular js指令应用于ajax内容？

I know I can apply to the template/templateURL, but currently the content will load from other place on my application.

我知道我可以申请模板/ templateURL,但目前内容将从我的应用程序的其他地方加载。

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 code:

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>");
});

2 个解决方案

#1

The new DOM must be accessible to the angular app in order to be compiled correctly. Here is one way to do this (not the only way). For applying the new DOM to the app's $rootScope, change this:

角度应用程序必须可以访问新DOM才能正确编译。这是一种方法(不是唯一的方法)。要将新DOM应用于应用程序的$ rootScope,请更改:

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

to:

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

According to the Angular docs:

根据Angular文档:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

$ apply()用于从角度框架外部以角度执行表达式。 (例如,来自浏览器DOM事件,setTimeout,XHR或第三方库)。

#2

It would be best if you could load your extra content from within the angular framework. Check out ng-include.

如果您可以从角度框架中加载额外的内容,那将是最好的。查看ng-include。

If that can't be used to do what you need, you'll have to manually call the angular compile service on the element, to compile it and link it onto the scope yourself using $compile.

如果不能用来做你需要的东西,你必须手动调用元素上的角度编译服务,编译它并使用$ compile自己将它链接到作用域。

Compiling elements touches the DOM, and therefore should be done within a custom directive if possible.

编译元素接触DOM,因此应尽可能在自定义指令中完成。

#1