2

サーバーからテンプレートをロードするコントローラーがあります。コントローラーは、http でテンプレートを受け取り、それを有効な html にコンパイルします。すべて問題ありませんが、js 呼び出しです。

私のテンプレートには、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 これは予測どおりに動作します。しかし、この方法ではエラー処理を行うことはできません。

4

1 に答える 1

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

于 2015-12-04T23:01:03.653 に答える