gpt4 book ai didi

javascript - 空数组上的 Angular 双向数据绑定(bind)不起作用

转载 作者:行者123 更新时间:2023-11-30 05:31:22 24 4
gpt4 key购买 nike

我有一个弹出气泡的指令,其中要在弹出窗口中显示的按钮作为对象数组在属性中提供:

JS( Controller )

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

经过试验,我偶然发现,如果我从一个非空数组开始,然后添加它就可以了。为什么 Angular 数据绑定(bind)会在空数组上中断?我该怎么做才能解决这个问题?

编辑

该事件在 ng-click 上调用,如下所示:

JS( Controller )

$scope.onClick = function () {

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

最佳答案

指令 HTML 如下所示:

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

您可以看到弹出窗口中的按钮仅在 buttons 为真时显示。有趣的是,当 buttons 为空时,div.buttons 没有显示,即使 !![] 在 javascript 中给出 true,所以我可以只假设 Angular 使用它自己的相等函数来测试这里。但是,即使随后将按钮添加到数组中,div 也不会显示。

当我将等式更改为 ng-if="buttons.length" 时,(因为它可能从一开始就应该如此)一切正常。

关于javascript - 空数组上的 Angular 双向数据绑定(bind)不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26763706/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com