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)来添加每个按钮。请注意，我正在维护原始数组，而不是替换数组，因此不应破坏数据绑定。但是，新按钮不会出现在气泡中，并且调试显示该按钮未添加到指令范围中。

经过实验，我偶然发现如果我从一个非空数组开始然后添加它就可以了。为什么角度数据绑定会在空数组上中断？我可以做些什么来解决这个问题？

编辑

该事件被调用，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。有趣的div.buttons是，没有显示什么时候buttons是空的，即使!![]在 javascript 中给出了 true，所以我只能假设 Angular 使用它自己的相等函数来测试这里。但是，即使随后将按钮添加到数组中，div 也没有显示。

当我将等式更改为ng-if="buttons.length", （可能从一开始就应该如此）事情正常。

于 2014-11-05T18:41:29.200 回答