当前位置: 首页 > 面试题库 >

角度:ng-bind-html过滤掉ng-click?

左丘峰
2023-03-14
问题内容

我有一些要从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的输出,我不知道为什么。是否应该这样做,如果可以,可以禁用此行为吗?

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

有任何想法吗?


问题答案:

好的,所以问题在于它不会编译您包含的html(Angular不会解析它以查找指令等)。想不出一种方法可以从控制器内部进行编译,但是您可以创建一个包含内容的指令,然后对其进行编译。

所以你会改变

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

Angular1.2.12:http://jsfiddle.net/7k8xJ/4/

Angular1.4.3:http://jsfiddle.net/5g6z58yy/(与以前的代码相同,但有人说它在1.4上不起作用。*)



 类似资料:
  • 问题内容: plnkr链接 我有一个我想将html绑定到它的元素。 这样可行。现在,连同它,我还有一个绑定到绑定的html的指令: 但是带有div和anchor 的指令不求值。我该如何运作? 问题答案: 我也遇到了这个问题,经过几个小时的互联网搜索,我读到了@Chandermani的评论,事实证明这是解决方案。您需要使用以下模式调用“编译”指令: HTML: JS: 您可以在这里看到它的工作提琴

  • 问题内容: 我想知道ng-bind-html和bind-html-compile指令之间的区别。例如我给 到ng-bind-html,这会剔除bind-html-compile所没有的样式。我可以知道何时应该使用每个指令。谢谢。 问题答案: bind-html-compile 不是标准的Angular指令,它带有模块https://github.com/incuna/angular- bind-h

  • 问题内容: 我曾经能够用来输出未经消毒的代码(因为消毒发生在服务器端)。 但是现在这个选择消失了吗?我知道我可以使用,但是当不安全易于使用时,将其添加到整个JavaScript上将是一个巨大的痛苦。 我怎么不安全回来? 问题答案: 好吧,仅创建您自己的指令非常简单,这是一个示例。 指令 : 用法 : 演示: http ://jsfiddle.net/cC5VZ/2

  • 问题内容: 有没有什么好方法可以使用angular过滤列表而不使用ng- repeat?我不想首先使用javascript绘制列表,但是之后我想使用angular对其进行过滤。 例: 我想使用搜索框来过滤现有的html。 (一般请不要使用ng-repeat或jQuery给出任何示例) 问题答案: 您可以编写一个简单的指令来处理显示/隐藏: 并以这种方式使用它: 使用指令有两个好处: 1)。您不必在

  • 问题内容: 我有指令 控制器: 在索引页面上,我有: 每当包含不同的html时,我的自定义服务都会返回 我想做的是每次在指令的内容中推送不同的值以对其进行编译并将其放入html并处理控制器中的click函数时。因为我是AngularJS的新手,所以一段时间以来一直在努力解决这个问题。请帮忙。 问题答案: 您不需要处理$ sce即可达到目的。 您可以将as字符串传递给指令。在指令中编译后,它将起作用

  • 问题内容: 我参加了一次有角度的演讲,会议中提到的一位参加者胜于束缚。 原因之一是将变量放在监视列表中,并且仅当发生模型更改时,才将数据推送到视图中查看;另一方面,每次都会对表达式进行插值(我想这是角周期)并推送值,即使值更改与否。 也有人说,如果屏幕上没有太多数据,则可以使用,并且性能问题将不可见。有人可以帮我阐明一下这个问题吗? 问题答案: 如果您没有使用,则类似以下内容: 您可能会在解决之前