rendering html from a controller in angular

Question

Hopefully someone can point my in the right direction.

I am building a web app and part of it requires a user to click a button as fast as they can to obtain a score. The design dictates that I will need to show this score in double digits i.e 9 would be 09 so for styling I need to wrap span tags around each digit.

I have got everything working as required, I'm just having an issue with outputting the score that is wrapped in span tags as rendered html in my view.

I've put together a fiddle for the section that is causing me problems. Any advice, help, best practices etc is much appreciated.

What I've tried:

I've included a few of the things I've tried. Basically they involve using $sce and trying to ng-bind-html in the view. Attempt 3 seems the most logical to me but the $scope.count isn't being updated. I'm guessing I need to add a $watch or $apply function to keep it binded? but I'm not too sure how to implement it or even if this is good practice. Also, because I'm outputting html is it better practice to do this in a directive?

Fiddle http://jsfiddle.net/funkycamel/gvxpnvqp/4/

HTML

<section ng-app="myApp">
<div ng-controller="MyController">

    <button ng-click="add(1)">add</button>

    <!-- First attempt -->
    <p class="first-attempt">{{ pad(count) }}</p>

    <!-- Second attempt -->
    <!-- in order for this attempt to work I have to call the pad2 function which
    returns trustedHtml -->
    {{ pad2(count) }}
    <p class="second-attempt" ng-bind-html="trustedHtml"></p>

    <!-- Third attempt -->
    <p class="third-attempt" ng-bind-html="moreTrustedHtml"></p>

</div>

Javascript

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', '$sce', function ($scope, $sce) {

// Set initial count to 0
$scope.count = 0;

// function to add to $scope.count
$scope.add = function (amount) {
    $scope.count += amount;
};

// Attempt 1
// make sure number displays as a double digit if
// under 10. convert to string to add span tags
$scope.pad = function (number) {
    var input = (number < 10 ? '0' : '') + number;
    var n = input.toString();
    var j = n.split('');
    var newText = '';
    var trustedHtml = '';

    for (var i = 0; i < n.length; i++) {
        newText += '<span>' + n[i] + '</span>';
    }

    return newText;
};


// Attempt 2 - trying to sanitise output
// same as above just returning trusted html
$scope.pad2 = function (number) {
    var input = (number < 10 ? '0' : '') + number;
    var n = input.toString();
    var j = n.split('');
    var newText = '';
    var trustedHtml = '';

    for (var i = 0; i < n.length; i++) {
        newText += '<span>' + n[i] + '</span>';
    }

    // return sanitised text, hopefully
    $scope.trustedHtml = $sce.trustAsHtml(newText);
    return $scope.trustedHtml;
};

// Attempt 3
// Trying to sanitise the count variable
$scope.moreTrustedHtml = $sce.trustAsHtml($scope.pad($scope.count));

}]);

These currently output

<span>0</span><span>0</span>

<span>0</span><span>0</span>

00
00

Again any advice/help is greatly appreciated.

@tymeJV: ng-show shows or hides an html element? The count is a scope variable and is holding the count. The issue I have is outputting the spans with that count — Jay
– Jay, Commented Mar 5, 2015 at 14:16
You've got controllers creating HTML code .... this isn't the angular way. Directives do stuff with DOM. Controllers just tie together services and view interactions. — Callum Linington
– Callum Linington, Commented Mar 5, 2015 at 14:20

charlietfl · Accepted Answer · 2015-03-05 14:33:35Z

1

Far simpler solution:

HTML

<p>{{ count < 10 ? '0' + count : count}}</p>

Controller:

app.controller('MyController', ['$scope', function ($scope) {
    $scope.count = 0;

    $scope.add = function (amount) {
        $scope.count += amount;
    };
}]);

DEMO

If you prefer you can do the padding in the controller instead, just use another variable

app.controller('MyController', ['$scope', function ($scope) {
    var count = 0;
    $scope.countText = '0';

    $scope.add = function (amount) {
        count += amount;
        $scope.countText = count < 10 ? '0' + count : count;
    };
}]);

answered Mar 5, 2015 at 14:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Jay Over a year ago

I like the idea of doing the pad directly in the html it's just I need the spans for styling, unless you could suggest a better way?

Collectives™ on Stack Overflow

rendering html from a controller in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest