Question

我的模型包含一些我希望在向用户显示之前修改的值。也许这是在文档中写的，我盲目地看到它。

让我说我想像这样显示我的变量

<span decode-directive>{{variable}}</span>

我想编写decode-directive，它应该显示变量+ 1234 f.e。

我需要这几点，所以我不能只针对一个特殊对象进行编码我希望你能帮我解决这个问题。

Answer 1

您可以使用角度滤镜。如果您的变量始终是html编码文本，则解决方案的示例将是：

filter('html',function($sce){
    return function(input){
        return $sce.trustAsHtml(input);
    }
})

然后在html中你可以使用：

<span ng-bind-html="var | html"></span>

小提琴：

angular.module("app",[])

  .filter('html',function($sce){
      return function(input){
          return $sce.trustAsHtml(input);
      }
  })

.controller("main", function($scope){
$scope.var= "&lt;S&ouml;ren"

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="main" >
<span ng-bind-html="var | html"></span>
</div>

Answer 2

您只需使用ngSanitize库并在您的应用中包含依赖项

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'S&ouml;ren';
});

<强> HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script data-require="ngSanitize@*" data-semver="1.3.15" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>{{name}}!</p>

    <span ng-bind-html="name"></span>
  </body>

</html>

使用angularjs指令操作范围值

2 个答案: