Angular 模板编译 javascript

Question

我有从服务器加载模板的控制器。 Controller通过http接收模板，编译成有效的html。一切都很好，但 js-calls.

我的模板包含带有 href-javascript/onclick 操作的 href's/buttons。这是简化的片段：

/*global angular */
var app = angular.module("app", ["ngSanitize"]);
app.controller('app.core.ctrl', function($scope, $rootScope, $interpolate) {
  "use strict";
  $scope.check = 1;
  $scope.fetchContent = function() {
    $scope.content = $interpolate(
      '<a href="http://example.com">not interesting link</a>'+
      '<a href="javascript:callSuperLogic();"> My business template link {{check}}</a>' +
      '<button onclick="callSuperLogic();"> My business template button {{check+1}}</button>'
    )($scope);
  };

  $scope.fetchContent();
});

var callSuperLogic = function() {
  "use strict";
  alert('It works!!!');
};

a,
button {
  display: block;
}
div {
  border: 1px solid #A6A6A6;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
<div ng-app="app">
  <div ng-controller="app.core.ctrl">
    My template calls:
    <div ng-bind-html="content"></div>
  </div>
</div>

我试过 $sce.trustAsResourceUrl('javascript:callSuperLogic();'); 但没用。

有什么方法可以从已编译的模板中调用 js-event 吗？

UPD1：找到解决方法：ng-include 这表现如预期。但是这样我就不能做任何错误处理了。

Answer 1

如果 ngInclude 不符合您的需求，最好的方法是使用指令，这样您就可以直接访问元素并将内容放入 jQuery:

module.directive('myTemplate', function() {
  return {
    compile: function(tElement) {
      var html = '<button onclick="clickme()">Click me!</button>';
      tElement.replaceWith(html);
    }
  };
});

在这种情况下

<my-template></my-template>

变成

<button onclick="clickme()">Click me!</button>

如果您通过 ajax 调用获取模板，则必须使用 $compile 服务（这可以通过 link 函数完成）：

module.directive('myTemplate', function($http, $compile) {
  return {
    link: function(scope, element, attrs) {
      $http.get(attrs.url).then(function(res) {
        tElement.replaceWith($compile(res.data)(scope));          
      });
    }
  };
});

您可以这样使用：

<my-template url="myurl/template.html"></my-template>

编辑:

在 url 更改时重新加载：http://plnkr.co/edit/j0nVOm

Angular 模板编译 javascript

Angular template compilation javascript

angularjs

ngsanitize