Question

我有一个名为 dataController 的控制器，两个名为 dataHttpServices 和 dataLocalServices 的服务以及一个html模板，一些指令。

在我的html模板中，我有两个不同的选项卡使用相同的控制器，并在我的控制器中从两个不同的位置添加项目列表。

在调试模式下，我看到数据正确更改但数据绑定无法正常工作。

我不知道我的错误是什么，请帮忙。在代码中;

这是Html;

<div 
    class="metadataSelect"
    layout="column" 
    ng-model="selectedItems" 
    ng-show="selectedItems.length > 0">                                 
    <div layout="row" ng-repeat="item in selectedItems">
        {{item.Name}}
    </div>
</div>

这是控制器;

$scope.addSelectedItem = function (selectedItem) {
    var found = false;
    var self = this;

    dataLocalService.addSelectedItem(selectedItem);
    $scope.selectedItems = dataLocalService.getSelectedItems();
};

这是服务;

this.selectedItems = [];

this.addSelectedItem = function (item) {
    this.selectedItems.push(item);
};

this.getSelectedItems = function () {
    return this.selectedItems;
};

我通过 ng-click 在两个不同按钮的点击事件中从范围调用 addSelectedItem 。

如果我首先通过单击第一个按钮添加项目并单击第二个按钮（首先单击第一个按钮），该按钮将数组绑定到div正确。

但是当我在单击第一个按钮之前单击第二个按钮添加项目时，该数组不会绑定到div。

通过单击第二个按钮将一些项添加到数组后，当我单击第一个按钮时，将所有元素绑定到div。例如，三个元素一次但不绑定而不单击第一个按钮。

我的错误是什么？谢谢你的帮助。

Answer 1

我使用 $ scope。$ watch 解决了这个问题。我认为问题是它们的范围不同，因为我用 ng-controller 创建了两次控制器。这是我发现解决它的代码片段。

$scope.$watch('selectedItems', function () {
    $scope.selectedItems = $metadataLocalService.getSelectedItems();
});

这解决了我的问题。因为手表正在跟踪相关的数据变化等。

AngularJs数组未绑定到模板

1 个答案: