Question

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

我的模板包含href的/按钮和href-javascript / onclick动作。这是简化的代码段：

/*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服务（这可以通过链接函数完成）：

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>

修改：

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

角度模板编译javascript

1 个答案: