2

我拿了一个示例 AngularJS 应用程序并开始对其进行更改以满足我的需要。现在单击更改 orderby 会导致重新加载整个控制器。好吧，这就是我初始化默认 orderby 的地方。因此，当我单击新的 orderby 时，我得到的是正确 orderby 的闪烁，然后快速返回默认值。一个警报显示控制器正在执行，但我不知道为什么或如何修复它。

戳这里

索引.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>

应用程序.js

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

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

控制器.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;
  };
});

提示Service.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;
  };
});

部分.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

4

1 回答 1

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="#"路由改变（并变得和以前一样）但再次触发控制器的初始化。

于 2013-05-31T05:08:28.983 回答