Question

我正在使用ui-router创建一个多页面表单。在表单的第一部分，用户将选择一个按钮。此按钮的值将用于对第二页上加载的表进行排序。我以为我可以用ng-click设置/更新按钮值，但它没有保存。第二页没有按更新的值排序。

我的具体问题出在我的firstPage.html - 点击我的ng按钮时。 sortType的原始值为：sortType = ''。我的计划是在此页面上设置我的sortType值。我就这样做了：

<a ui-sref="orderForm.step2" 
   ng-click="sortType ='name'" 
   class="btn btn-block btn-info">

我认为ng-click="sortType ='name'"会更新并保存sortType值。但是，当第二页仍然是：sortType= ''时。你们有没有关于如何解决这个问题的建议？谢谢！

这是我的第一页：

<div class="form-group row" ng-controller="formController">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="orderForm.step2" 
           ng-click="sortType ='name'" 
           class="btn btn-block btn-info">
           Title 
           <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
    </div>

    <h1>Presorted</h1> 
    <pre>{{sortType}}</pre>
</div>

这是我的第二页：

<div class="form-group" ng-controller="formController">
    <h2> Sort type: </h2>
    <pre>{{sortType}}</pre>

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <td>
                    <label>Beverage</label>
                </td>
                <td>
                    <label>Type</label>
                </td>
                <td>
                    <label>Popularity</label>
                </td>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="drink in drinks | orderBy: sortType | filter:searchDrink">
            <td>{{drink.name}}</td>
            <td>{{drink.type}}</td>
            <td>{{drink.popularity}}</td>
        </tr>
    </tbody>
  </table>
</div>

这是我的App.js页面：

angular.module('myApp', ['ngAnimate', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('orderForm', {
            url: '/orderForm',
            templateUrl: 'orderForm.html',
            controller: 'formController'
         })

        .state('orderForm.step1', {
            url: '/step1',
            templateUrl: 'step1.html'
         })

         .state('orderForm.step2', {
            url: '/step2',
            templateUrl: 'step2.html'
         });

     $urlRouterProvider.otherwise('/orderForm/step1');
 })

.controller('formController', function($scope) {

    $scope.formData = {};
    $scope.processForm = function() {
         alert('Thank you!');
     };

     $scope.sortType     = ''; 
     $scope.sortReverse  = false;  
     $scope.searchDrink    = '';     

     //Lists of Drinks:
     $scope.drinks = [
        {name:'Americano', type: 'Espresso Beverage', popularity: 4},
        {name:'Raspberry Tea', type: 'Tea', popularity: 2},
        {name:'Vanilla Latte', type: 'Espresso Beverage', popularity: 3 },
        {name:'Mocha', type: 'Espresso Beverage', popularity: 8},
        {name:'Pike', type: 'Freshly Brewed Coffee', popularity: 6},
        {name:'Green Tea', type: 'Tea', popularity: 4},
        {name:'Frappuccino', type: 'Iced Drinks', popularity: 5},
        {name:'Fruit Smoothie', type: 'Iced Drinks', popularity: 6}
    ];

});

Answer 1

当您使用UiRouter路由时，它会在每次调用控制器时初始化您的控制器，在这种情况下，在页面之间。

这里你需要的是一个能保存你的价值的服务，因为它只被实例化一次（单身）。

进一步阅读：https://docs.angularjs.org/guide/services

教程：https://www.youtube.com/watch?v=HXpHV5gWgyk

Answer 2

每当加载页面时，都会实例化控制器。由于您的控制器顶部有sortType = 'name'，因此该值设置为＆＃39;＆＃39;。

此外，在您的模板中，通过执行sortType，您可以将值绑定到控制器的$ scope的变量$rootScope.sortType。但每个控制器都有自己的范围。所以你不能像那样传递变量。

快速而肮脏的方法是将值绑定到$ rootScope。然后在第二个控制器中，您可以$(function () { $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover(); })。

我的建议实际上是使用像angular-wizard这样的东西，因为这是你似乎想要实现的目标：https://github.com/mgonto/angular-wizard

在ng-Click上更新并保存值

2 个答案: