从 angular 中的控制器渲染 html

Question

希望有人能指出我正确的方向。

我正在构建一个 Web 应用程序，其中一部分要求用户尽快单击按钮以获得分数。设计规定我需要以两位数显示此分数，即 9 将是 09，因此对于样式我需要在每个数字周围包装 span 标签。

我已按要求完成所有工作，我只是在输出包裹在 span 标签中的分数时遇到问题，如我所见 html 呈现的那样。

我已经为导致我出现问题的部分整理了一个 fiddle。非常感谢任何建议、帮助、最佳实践等。

我试过的：

我已经包含了一些我尝试过的东西。基本上它们涉及使用 $sce 并尝试在视图中使用 ng-bind-html 。尝试 3 对我来说似乎是最合乎逻辑的，但是 $scope.count 没有更新。我猜我需要添加一个 $watch 或 $apply 函数来保持它的绑定？但我不太确定如何实施它，或者即使这是一个好习惯。另外，因为我正在输出 html 在指令中执行此操作是否更好？

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

}]);

目前输出这些

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

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

00
00

再次感谢任何advice/help。

Answer 1

更简单的解决方案：

HTML

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

控制器：

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

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

DEMO

如果您愿意，可以在控制器中进行填充，只需使用另一个变量

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;
    };
}]);

从 angular 中的控制器渲染 html

rendering html from a controller in angular

angularjs

angularjs-directive

ng-bind-html