2016-03-17 3 views
0

В моей модели содержатся некоторые значения, которые я хочу изменить, прежде чем показывать их пользователю. Может быть, это написано в документах, и я хочу ослепить его.Манипулировать значением области с помощью директивы angularjs

Допустим, я хочу показать мою переменную как этот

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

Я хочу написать расшифровывает директиву, и она должна отображать переменную + 1234 F.E.

Мне нужно это в нескольких точках, поэтому я не могу закодировать его только для одного специального объекта.
Надеюсь, вы сможете помочь мне в этом.

+0

почему вы don't {{переменная + '1234'}}? Если это то, что вам действительно нужно вычислить/изменится, вы должны сделать , а затем выбрать переменную в директиве и изменить текст элемента – juvian

+0

yes Мне нужно преобразовать строку в переменная в читаемую строку – dominic

+0

Не могли бы вы показать пример значения переменной и ожидаемого вывода html? – juvian

ответ

1

Вам просто нужно использовать библиотеку 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="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script data-require="[email protected]*" 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> 
+0

Спасибо, что это работает хорошо. – dominic

1

Для этого можно использовать угловой фильтр. Если переменная всегда HTML закодированный текст, пример решения будет:

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

А потом в HTML вы можете использовать:

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

Fiddle:

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>

Смежные вопросы