ポップアップ バブルのディレクティブがあります。ポップアップに表示されるボタンは、オブジェクトの配列として属性で提供されます。
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' });
};