1

うまくいけば、誰かが私を正しい方向に向けることができます.

私は Web アプリを構築していますが、その一部では、ユーザーがボタンをできるだけ速くクリックしてスコアを取得する必要があります。設計では、このスコアを 2 桁で表示する必要があることが規定されています。つまり、9 は 09 になるため、スタイリングのために各桁をスパン タグで囲む必要があります。

必要に応じてすべてが機能していますが、ビューでレンダリングされた 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 に答える