アンギュラJS "<a href='tel:{num} '> call me</a>ハイパーリンクが

Question

動作しませんが、hrefが失敗します。

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

実際の出力 - 文字列が表示されますが、レンダリングされていないハイパーリンクされてそれがクリックできないのですページ表示タグが

<a> call me support </a> 

期待出力として生成点検 - 。。。ハイパーリンクに文字列を表示する必要があり

私は3気分でこれを実行しようと3210

Answer 1

"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>