Question

我试图在一个事件的HTML页面中更改标签的值，是否可以将html代码插入变量？

HTML代码如下：

<div ng-controller="welcomeCon" ><label>{{ welcomemsg }}</label></div>

以及脚本中的一些controller：

$rootScope.welcomemsg="You are not logged in,please log in or register"

有没有办法让单词log in和register成为链接？如果不是，如果有人可以指导我做什么，我会很高兴。

由于

Answer 1

使用$ sce服务。以下是示例示例

angular.module('app',[])
.controller("welcomeCon", function($scope,$sce){
  $scope.loginHtml = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
  $scope.trustedHtml = $sce.trustAsHtml($scope.loginHtml);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="welcomeCon">
  <div ng-bind-html="trustedHtml"> 
  </div>
</div>

或者您可以使用 ngSanitize 模块

angular.module('app',["ngSanitize"])
.controller("test", function($scope){
  $scope.html = "You are not logged in,please <a href=''>log in</a> or <a href=''>register</a>";
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>



<div ng-app="app" ng-controller="test">
  <div ng-bind-html="html">
    
  </div>
</div>

Answer 2

使用ng-bind-html指令将HTML绑定到模型值。请参见链接：http://www.w3schools.com/angular/ng_ng-bind-html.asp

您需要在应用程序中使用 ngSanitize 模块。包含 angular-santize.js 文件来执行此操作。

Answer 3

您可以使用$sce服务或ng-bind-html建议其他答案，但我会反对这种方法，因为链接不会改变，为什么要通过定义代码中的html而不是html。

你可能想要的是这样的：

<ul class="my-menu">
    <li ng-if="$root.loggedIn">
        <a href="url/to/logout">Logout</a>
    </li>
    <li ng-if="!$root.loggedIn">
        You are not logged in, please <a href="login">login</a> or <a href="register">register</a>
    </li>
</ul>

Answer 4

我知道你已经得到了答案，但只是把它放在那里......

您也可以使用非常简单的指令（如子视图）执行此操作，并避免同时使用$rootScope。这促进了跨应用程序的重用，并遵循角度模块化方法将事物分解成小部分（在这种情况下非常小部件！）。

<强> welcomeMessage.js

app.directive('welcomeMessage', function() {
  return {
    restrict: "E",
    templateUrl: "welcomeMessage.html"
  };
});

<强> welcomeMessage.html

<p>
  You are not logged in, please 
  <a href="/login">log in</a> or 
  <a href="/register">register</a>
</p>

示例用法（在index.html中）

<welcome-message />

<强> Sample Plunk

如何使用angularJS在$ rootScope变量中编写HTML代码？

4 个答案: