5

我知道我可以apply访问模板/模板 URL，但目前内容将从我的应用程序的另一个位置加载。

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

2 回答 2

3

Angular 应用程序必须可以访问新的 DOM 才能正确编译。这是执行此操作的一种方法（不是唯一方法）。要将新的 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 或第三方库）。

于 2013-05-22T22:08:48.413 回答
0

如果您可以从角度框架内加载额外的内容，那将是最好的。退房ng-include。

如果这不能用来做你需要的事情，你必须手动调用元素上的角度编译服务，编译它并使用$compile.

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

于 2013-05-22T22:07:02.563 回答