1

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

我正在构建一个网络应用程序，其中一部分要求用户尽快单击按钮以获得分数。设计要求我需要以两位数显示这个分数，即 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

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

4

1 回答 1

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;
    };
}]);
于 2015-03-05T14:33:35.317 回答