javascript - Apps Foundation，如何更改表单提交的 View ？

Question

很高兴发现 Foundation for Apps 与 AngularJS 捆绑在一起，我以此为借口开始学习 AngularJS。我尝试重新创建旧 Web 应用程序的某些部分，以查看使用这个新框架可以实现的功能。我遇到了障碍:

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

遵循 http://foundation.zurb.com/apps/docs/#!/angular 中给出的示例我创建了一个像这样附加到表单的 Controller 。

<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()被调用。但是如何从那里切换到下一个 View ？

Answer 1

您可以简单地使用 $state.go('stateName');它将从 $stateProvider 中找到正确的状态，并使用特定的 Controller 模板和其 .state 中的所有指定设置在该页面上重定向您

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

Note: Before doing $state.go don't forget to add $state dependency on controller

有关更多信息，请参阅 Doc