Question

在我的AngularJS应用程序中，我有一个用户需要输入应用程序编号的表单，如果成功，则显示下面显示适当数据的内容。如果我将其作为参数传递给当前scope，我只能通过state访问此数据。我正在使用ui-router进行路由。

我已阅读Reloading current state - refresh data之类的线程，它告诉我我可以将数据传递到当前状态而不刷新页面，但它会保持刷新并且内容不会显示。我也不确定我是否正确使用ng-show和/或ng-if。我传递数据的功能如下：

vm.findPatent = function(patentNo) {
    searchPatentService.findPatent(patentNo)
    .then(
        function(data) {
            $state.go('.', { patent: data }, {reload: false, notify: false, location: false})
            })
        },
        function(errResponse) {
            console.error('Error while finding patent');
        }
    );
}

我的参数state：

.state('search-patent', {
    url: '/search-patent',
    component: 'searchpatent',
    params: {
        navigation: 'patentnav',
        patent: null
    }
})

我的观点以及在表格上显示以下内容的表格提交：

<form ng-submit="$ctrl.findPatent(searchPatent)" name="searchPatentForm">
    <fieldset>
        <div class="form-group row">
            <labelfor="searchPatent">EP No.</label>
            <div>
                <input type="text" name="searchPatent" ng-model="searchPatent" class="form-control" placeholder="Search" required>
            </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </div>
  </fieldset>
</form> 

<div class="row" ng-show="searchPatentForm.$submitted">
    <div class="col-md-12">
//ANOTHER FORM AND CONTENT WHICH IS DISPLAYED ON SUBMIT
    </div>
</div>

问题

如何在不刷新页面的情况下将数据传递给当前state？另外，使用ng-show是否有更好的解决方案？感谢

Answer 1

由于您希望在提交后留在页面上。

$scope.result= null;
vm.findPatent = function(patentNo) {
    searchPatentService.findPatent(patentNo)
    .then(
        function(data) {
            $scope.result=data;
            })
        },
        function(errResponse) {
            console.error('Error while finding patent');
        }
    );
}

在您看来，如果您希望重新创建div，则应使用ng-if，否则请使用ng-show see details here

<div class="row" ng-if="result">
    <div class="col-md-12">
      {{result}}
    </div>
</div>

有关详细示例，请参阅here

将参数传递给state会导致元素无法显示

1 个答案: