Question

很高兴看到与AngularJS捆绑在一起的Apps for Apps，我以此为借口开始学习AngularJS。我尝试重新创建旧的Web应用程序的一部分，以了解这个新框架的可能性。我遇到了障碍：

其中一个观点是搜索表单。在“提交”时，它应该滑开，“结果”视图应该滑入。现在，使用<a ui-sref="">切换这些视图（如在导航菜单中）可以正常工作。但是如何在formSubmit上触发这个 - 并将SearchField InputValue作为参数传递 - ？

按照http://foundation.zurb.com/apps/docs/#!/angular中给出的示例，我创建了一个像这样附加到表单的控制器。

<form ng-controller="StaffSearchController" ng-submit="doSearch()" >

angular.module('application').controller('StaffSearchController', StaffSearchController);
StaffSearchController.$inject = ['$scope', '$stateParams', '$state', '$controller'];
function StaffSearchController($scope, $stateParams, $state, $controller) {
    angular.extend(this, $controller('DefaultController', {$scope: $scope, $stateParams: $stateParams, $state: $state }));
    console.info("StaffSearchController");
    $scope.searchTerm = "search me";
    $scope.doSearch = function(){
      console.log("doSearch");
    };
}

调用doSearch()。但是从那里做什么来切换到下一个视图？

Answer 1

您可以简单地使用$state.go('stateName');从$ stateProvider中找到正确的状态，并使用特定的控制器模板在其.state

内的所有指定设置重定向您

对于带参数的州，您可以使用$state.go('stateName', {id: 1});

注意：在执行$state.go之前，请不要忘记添加$state依赖项在控制器上

有关详细信息，请参阅Doc

应用基础，如何更改表单提交视图？

1 个答案: