In my project, I have created a directive for a popup bubble. The buttons to be displayed in the popup are provided in an attribute as an array of objects:
JavaScript (Controller)
$scope.buttons = [{ label: 'OK' }, { label: 'Cancel' }]
The structure of the directive is as follows:
HTML
<ui-popup buttons="buttons"></ui-popup>
JavaScript (Directive)
'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) {
...
}
};
}]);
Initially, I encountered an issue where adding buttons dynamically to an empty array using $scope.buttons.push(obj) did not reflect in the popup bubble. Surprisingly, starting with a non-empty array and then adding buttons worked perfectly fine. It raised questions about why angular data-binding breaks on an empty array and how to address this issue.
Edit
The event triggering the addition of buttons is invoked on ng-click and implemented as follows:
JavaScript (Controller)
$scope.onClick = function () {
$scope.locked = true;
$scope.buttons.push({ label: 'OK' });
};