Question

我有一些我从json文件加载的html数据。

我在我的应用程序中使用ngSanitize并使用ng-bind-html显示此html数据。

现在我想从标准

转换json blob中的任何链接

<a href="some_link">link</a>

到：

<a ng-click="GotoLink('some_link','_system')">link</a>。

所以我在json文件上做一些regExp来转换链接，但是出于某种原因，ng-bind-html过滤掉了ng-click的输出，我可以＆＃ 39;弄清楚原因。它是否应该这样做，如果可以，可以禁用此行为？

查看此jsFiddle进行演示： http://jsfiddle.net/7k8xJ/1/

有什么想法吗？

Answer 1

好的，所以问题是它没有编译你包含的html（angular isn解析它以找到指令和诸如此类的东西）。无法想出一种方法可以从控制器中进行编译，但是您可以创建一个包含内容的指令，并对其进行编译。

所以你会改变

<p ng-bind-html="name"></p>

到

<p compile="name"></p>

然后是js：

var myApp = angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
.directive('compile', ['$compile', function ($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
   )};
  }]).controller('MyCtrl', function($scope) {
    var str = 'hello http://www.cnn.com';
    var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
    result = str.replace(urlRegEx, "<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>");
    $scope.GotoLink = function() { alert(); }
    $scope.name = result;
});

Angular 1.2.12：http://jsfiddle.net/7k8xJ/4/

Angular 1.4.3：http://jsfiddle.net/5g6z58yy/（与之前的代码相同，但有些人说它不能用于1.4。*）

Answer 2

使用$sce明确信任HTML 当您希望Angular将模型数据呈现为HTML而不提出任何问题时，$sce服务就是您所需要的。 $sce是一个严格的上下文转义服务 - 一个服务的花哨名称，它可以用一个对象来包装HTML字符串，该对象告诉Angular的其余部分，HTML被信任在任何地方呈现。

在以下版本的控制器中，代码要求$sce服务并使用该服务使用$sce.trustAsHtml.将链接数组转换为可信HTML对象数组

app.controller('XYZController', function ($scope, $sce) {

$sce.trustAsHtml("<table><tr><td><a onclick='DeleteTaskType();' href='#workplan'>Delete</a></td></tr></table>");

Answer 3

我仍然面临编译的一些问题，因为这不符合我的要求。所以，有这个，一个非常好的和容易的黑客来解决这个问题。

我们用onClick替换ng-click作为onClick工作。然后我们编写一个javascript函数并在onClick事件上调用它。在onClick函数中，我们找到了锚标记的范围，并明确地调用了所需的函数。

以下是它的完成方式：）

此前，

<a id="myAnchor" ng-click="myControllerFunction()" href="something">

现在，

<a id="myAnchor" onClick="tempFunction()" href="something">

在底部或某处，

<script>
function tempFunction() {
 var scope = angular.element(document.getElementById('myAnchor')).scope();
  scope.$apply(function() {
    scope.myControllerFunction();
 });
}
</script>

现在应该可以了。希望能帮助某人：）

有关详细信息，请参阅here。

Angular：ng-bind-html过滤掉ng-click？

3 个答案: