Question

我采用了一个示例AngularJS应用程序并开始根据我的需要进行更改。现在单击以更改orderby会导致重新加载整个控制器。那就是我正在初始化默认orderby的地方。所以当我点击一个新的orderby时，我得到的是一个正确的命令闪光，然后快速返回默认值。警报显示控制器正在执行，但我不知道为什么或如何解决它。

Plunker here

的index.html

<!DOCTYPE html>
<html data-ng-app="promptsApp">
<head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div ng-view></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    <script src="app.js"></script>
    <script src="controllers.js"></script>    
    <script src="promptsService.js"></script>
</body>
</html>

app.js

var app = angular.module('promptsApp', []);

app.config(function ($routeProvider) {
  $routeProvider
    .when('/prompts',
    {
      controller: 'PromptsController',
      templateUrl: 'partial.html'
    })
    .otherwise({ redirectTo: '/prompts' });
});

controllers.js

app.controller('PromptsController', function ($scope, promptsService) 
{
  init();

  function init()
  {
    $scope.prompts = promptsService.getPrompts();
    $scope.orderby='TRANSFEREE';
    $scope.reverse = false;
    //alert('Hi');
  } 

  $scope.setOrder = function (orderby) {
    if (orderby === $scope.orderby)
    {
      $scope.reverse = !$scope.reverse;
    }
    $scope.orderby = orderby;
  };
});

promptsService.js

app.service('promptsService', function () 
{
  this.getPrompts = function (user) 
  {
    var prompts = [
        {
            id: 1, NOTE: 'Call client about something', CALLBACK_DATE: '12-01-2013', TRANSFEREE: 'Tom Tuttle', REG_NUM: '123456'
        },
        {
            id: 2, NOTE: 'Notify client of delay', CALLBACK_DATE: '12-10-2013', TRANSFEREE: 'Eddie Munster', REG_NUM: '101314'
        },
        {
            id: 3, NOTE: 'Complete paperwork', CALLBACK_DATE: '12-12-2013', TRANSFEREE: 'Mary Tyler Moore', REG_NUM: '998877'
        }
        ];

    return prompts;
  };
});

partial.html

<div class="prompts">
  <div class="container">
    <header>
       <h3>Prompts</h3>
       <ul class="nav nav-pills">
         <li ng-class="{'active': orderby=='CALLBACK_DATE'}"><a href="#" ng-click="setOrder('CALLBACK_DATE')">Date</a></li>
         <li ng-class="{'active': orderby=='TRANSFEREE'}"><a href="#" ng-click="setOrder('TRANSFEREE')">Transferee</a></li>
         <li> (Currently: {{orderby}})</li>
       </ul>
     </header>

     <div>
       <div class="row cardContainer">
         <div class="span3 card" data-ng-repeat="prompt in prompts | orderBy:orderby:reverse">
           <div class="cardHeader">{{prompt.TRANSFEREE}}</div>
           <div class="cardBody">{{prompt.NOTE}}
         <br># <a href="#">{{prompt.REG_NUM}}</a> {{prompt.CALLBACK_DATE}}
           </div>
         </div>
       </div>
     </div>
    <br />
    {{prompts.length}} prompts
  </div>
</div>

请参阅Plunker here

Answer 1

<li ng-class="{'active': orderby=='CALLBACK_DATE'}">
    <a href="" ng-click="setOrder('CALLBACK_DATE')">\
        CallBack Date
    </a>
</li>
<li ng-class="{'active': orderby=='TRANSFEREE'}">
    <a href="" ng-click="setOrder('TRANSFEREE')">
        Transferee
    </a>
</li>
<li>> Currently: {{orderby}}</li>

移除href="#"并将其替换为href=""以获得所需的结果。让href="#"导致路由改变（并变得与之前相同），但再次触发控制器的初始化。

AngularJS orderby / controller行为：在orderby上执行的控制器

1 个答案: