Question

尝试使用Angular JS渲染超链接时，它不会生成超链接。所有其他标签（例如<p>或<h2>）都能正常工作，但href会失败。

var tempString = "<a href='tel:{mob_number}'>call me support</a>"

实际输出 - 显示字符串但不呈现超链接。它不可点击。检查生成为

的页面显示标记

<a> call me support </a>

预期输出 - 应显示带超链接的字符串。

Answer 1

我尝试通过3种情绪来做到这一点“Html，directive，bind-html”

指令不起作用stackoverflow，请在当地试用

var app = angular.module("app", []);


app.controller("ctrl", [
  "$scope", "$sce",
  function($scope, sce) {
    $scope.mob_number = "123";

    var tempString = "<a href=\"tel:" + $scope.mob_number + "\">call me support</a>";
    $scope.asHtmlTemplate = sce.trustAsHtml(tempString);
  }
]);

app.directive("mobile", function() {
  return {
    templateUrl: "mobile.html",
    scope: {
      content: "@",
      mobNumber: "="
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <h4>simple html</h4>
  <a ng-href="tel:{{mob_number}}">call me support</a>

  <h4>as directive [directive not display in stackoverflow]</h4>
  <mobile mob_number="mob_number" content="call me support"></mobile>
  <!-- directive not display in stackoverflow ? -->

  <h4>as Html template from controller</h4>
  <div ng-bind-html="asHtmlTemplate"></div>
  
  <script type="text/ng-template" id="mobile.html">
    <a ng-href='tel:{{mobNumber}}'>{{content}}</a>
  </script>
</div>

Angular JS“<a href="tel:{num} "> call me</a>超链接不起作用

1 个答案: