Apps Foundation，如何更改表单提交的视图？

Question

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

其中一个视图是搜索表单。在 "submit" 上它应该滑开并且 "Result" 视图应该滑入。现在，使用 <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});

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

有关详细信息，请参阅 Doc

Apps Foundation，如何更改表单提交的视图？

Foundation for Apps, how to change view on form submit?

javascript

forms

zurb-foundation

angularjs

angular-ui-router