Question

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

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

我已经按要求完成了所有工作，我只是在我的视图中输出包含在span标签中的分数作为渲染html的问题。

我为那个导致我问题的部分拼凑了一个小提琴。任何建议，帮助，最佳实践等都非常感谢。

我尝试过的事情：

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

小提琴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

再次感谢任何建议/帮助。

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

从角度控制器渲染html

1 个答案: