显示模态窗口</ion-item>时,<ion-item>中的href会中断

时间:2014-08-17 11:19:05

标签: angularjs ionic-framework

请阅读编辑2,因为它包含更新的错误

我有一个像这样的重复:

    <ion-list>
        <ion-item ng-repeat="ship in ships" href="#app/ships/{{ship.id}}">
            {{ship}}
        </ion-item>
    </ion-list>

首次加载页面时,离子项href正常工作。将新数据添加到列表时会发生错误。 href元素停止工作,并且项目不可单击。刷新页面可修复href

添加的新数据正确显示在列表中,并带有正确的字段和值。

这是一个错误还是我需要做些什么来刷新列表?

修改

我正在使用SQLite来保存和检索我的数据,也使用此处的工厂包装器:https://gist.github.com/jgoux/10738978

添加更多代码:

要添加新船,我只需打开一个带有输入字段和提交按钮的模态窗口。

    // Called when the form is submitted
    $scope.createShip = function (ship) {
        shipFactory.saveShip(ship)
            .then(function () {
                $scope.shipModal.hide();
                updateScope();
                $scope.newship = {};
            });
    };

更新范围

    function updateScope() {
        shipFactory.getAllShips().then(function (ships) {
            $scope.ships = ships;
        });
    }

编辑2 无法在一个plunker中重新创建问题。我了解到它是造成错误的模态。打开然后关闭模态会导致错误(不保存)。

模态代码:

    // Create and load the Modal
    $ionicModal.fromTemplateUrl('new-ship.html', function (modal) {
        $scope.shipModal = modal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });

    // Open our new ship modal
    $scope.newShip = function () {
        $scope.shipModal.show();
    };

    // Close the new ship modal
    $scope.closeNewShip = function () {
        $scope.shipModal.hide();
    };

我尝试添加$scope.shipModal.remove();,但链接仍然存在。创建“拖动”事件可修复所有链接。例如:将导航菜单拖到视图中。

1 个答案:

答案 0 :(得分:0)

经过一些试验和错误,我终于解决了我的问题。虽然我不完全理解为什么会这么重要但是错误的发生是因为我放置了<button>元素。

如果按钮放在<ion-nav-buttons>标签内,则会发生错误。

<!--This doesn't work-->
<ion-nav-buttons side="right">
    <button menu-toggle="right" class="button button-icon icon ion-plus-circled" ng-click="newShip()"></button>
</ion-nav-buttons>

将按钮放在<ion-content>标记内的任何位置都按预期工作。

<ion-content class="has-header">
    ...
    <button ng-click="newShip()">New ship</button>
</ion-content>