2

ポップアップ バブルのディレクティブがあります。ポップアップに表示されるボタンは、オブジェクトの配列として属性で提供されます。

JS (コントローラー)

$scope.buttons = [{ label: 'OK' }, { label: 'Cancel' }]

ディレクティブは次のようになります。

HTML

<ui-popup buttons="buttons"></ui-popup>

JS (ディレクティブ)

'use strict';

angular
    .module('ui')
    .directive('uiPopup', [function () {

        return {
            replace: true,
            restrict: 'E',
            transclude: true,
            templateUrl: '/uikit/views/ui-popup.html',
            scope: {
                buttons: '=',
                anchor: '@',
                x: '@',
                y: '@'
            },
            link: function ($scope, element, attrs, ngModel) {
                ...
            }
        };
    }]);

これはうまくいきます。ただし、必要なのは、バブルにボタンがない状態で開始し、アプリケーションでイベントが発生したときにボタンを追加することです。したがって、空の配列から始めて、$scope.buttons.push(obj)各ボタンを追加するために使用します。配列を置き換えるのではなく、元の配列を維持することに注意してください。そのため、データバインディングが壊れてはなりません。ただし、新しいボタンはバブルに表示されず、デバッグは、ボタンがディレクティブ スコープに追加されていないことを示しています。

実験した後、空でない配列から始めて追加すると、うまく機能することが偶然わかりました。空の配列でAngularデータバインディングが壊れるのはなぜですか? この問題を回避するにはどうすればよいですか?

編集

イベントが呼び出されng-click、次のようになります。

JS (コントローラー)

$scope.onClick = function () {

    $scope.locked = true;
    $scope.buttons.push({ label: 'OK' });
};
4

1 に答える 1

1

ディレクティブ HTML は次のようになります。

...
<div class="buttons" ng-if="buttons">
    <ui-button color="primary" size="small" ng-repeat="button in buttons">{{ button.label }}</ui-button>
</div>
...

ポップアップのボタンbuttonsは true の場合にのみ表示されます。興味深いことに、 javascript では true が返されますが、空のdiv.buttons場合は表示されませんでした。そのため、Angular が独自の等値関数を使用してここでテストしているとしか思えません。ただし、その後ボタンが配列に追加された場合でも、div は表示されませんでした。buttons!![]

等値をng-if="buttons.length", に変更したとき (おそらく最初からあったはずです)、正しく動作しました。

于 2014-11-05T18:41:29.200 に答える