排序在智能表angular js中不起作用

Question

Smart table sorting is not working for some reason after using as custom directive. Can you help me what I did wrong?

My code http://plnkr.co/edit/mzPifIAT0RTd63rIYJsi?p=preview

Here is my view, HTML and js Code:

View

<div ng-controller="ctrl1 as one">
    <ltcg-table options="one.rowCollection"></ltcg-table>    
</div>
<div ng-controller="ctrl2 as two">
    <ltcg-table options="two.rowCollection"></ltcg-table>   
</div>

Grid HTML

<table st-table="rowCollection" class="table table-striped">
    <thead>
        <tr>
            <th st-sort="getters.firstName">first name</th>
            <th st-sort="lastName">last name</th>
            <th st-sort="birthDate">birth date</th>
            <th st-sort="balance">balance</th>
            <th>email</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in options">
            <td>{{row.firstName}}</td>
            <td>{{row.lastName}}</td>
            <td>{{row.birthDate}}</td>
            <td>{{row.balance}}</td>
            <td>{{row.email}}</td>
        </tr>
    </tbody>
</table>

js

(function () {
      var myApp = angular.module('myApp', ['smart-table']);

      function one() {               
          this.rowCollection = [
              {firstName: 'Laurent', lastName: 'Renard', birthDate: 4, balance: 102, email: 'whatever@gmail.com'},
              {firstName: 'Blandine', lastName: 'Faivre', birthDate: 5, balance: -2323.22, email: 'oufblandou@gmail.com'},
              {firstName: 'Francoise', lastName: 'Frere', birthDate: 4, balance: 42343, email: 'raymondef@gmail.com'}
          ];
          //alert($scope.gridOptions.columnDefs[1].name);
          //alert($scope.gridOptions);
      };


      function two() {     
          this.rowCollection = [
              {firstName: 'test2', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
              {firstName: 'test2', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
              {firstName: 'test2', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
          ];
          //alert($scope.gridOptions.columnDefs[1].name);
          //alert($scope.gridOptions);
      };

      myApp.directive('ltcgTable', function() {
          return {
              restrict: 'E',
              transclude: true,
              scope: {
                'options': '='
              },
              templateUrl: "ltcg-table.html",
              link: function(scope, element, attr) {                        
                  scope.rowCollection = scope.options;
              }
          }             
     });
     myApp.controller('ctrl1', one)
     myApp.controller('ctrl2', two)
})();

Answer 1

Ok the issue was two things

You need to use st-safe-src

<table st-safe-src="rowCollection" st-table="displayCollection" class="table table-striped">

And your row ng-repeat needs to be on the displayCollection

 <tr ng-repeat="row in displayCollection">

You don't need to initialise displayCollection