Manipulate scope value with angularjs directive

Question

my model contains some values that I want to modify before showing it to the user. Maybe this is written in the docs and I am to blind to see it.

Lets say I want to display my variable like this

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

I want to write the decode-directive and it should display variable + 1234 f.e.

I need this at a few points so I can't code it for only one special object.
I hope you can help me out with this.

why don´t you do {{variable + ' 1234'}} ? If it´s something that you really need to calculate/will change, you should do <span decode-directive="variable"></span> and then pick the variable on the directive and change element text — juvian
– juvian, Commented Mar 17, 2016 at 17:27
yes I need to convert the string in the variable to a readable string — dominic
– dominic, Commented Mar 17, 2016 at 17:28
Could you show an example of the value of variable and the expected html output? — juvian
– juvian, Commented Mar 17, 2016 at 17:31
variable for example S&ouml ;ren output should be Sören. variable without the whitespace. But stack overflow will render correct. — dominic
– dominic, Commented Mar 17, 2016 at 17:33
You can use ng-model instead of {{}} and then, within the directive ngModel: '='. If it's not clear, let me know. I hope this helps. Regards!! — KN_
– KN_, Commented Mar 17, 2016 at 17:44

Tushar · Accepted Answer · 2016-03-17 17:45:28Z

1

You just have to use ngSanitize library and include as dependency in your app like this

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

answered Mar 17, 2016 at 17:45

Tushar

1,1231 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

juvian · Accepted Answer · 2016-03-17 17:43:44Z

You could use an angular filter for this. If your variable is always html encoded text, an example of the solution would be:

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

And then in the html you can use:

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

Collectives™ on Stack Overflow

Manipulate scope value with angularjs directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related