Question

我按以下方式设置了一个名为ogPostList的指令：

angular.module('myApp')
   .directive('ogPostList', function() {
   return {
      restrict: 'E',
      scope: {
        page: '@'
      },
      templateUrl: '../scripts/directives/postList.html'
    };
 });

TemplateUrl：

<input type="text" ng-model="searchText" placeholder="Search" class="postListSearch" />
<table id="post_list_table" ng-controller="PostListController">        
    <tbody>
        <tr ng-repeat="postItem in {{page}} | orderBy:'toString()' | orderBy:'date':true | filter:searchText">
          <td><img title="{{'Post source ' + postItem.source}}" src="{{'images/' + postItem.source + '.svg'}}" height="20"/></td>
          <td>{{postItem.post}}</td>
          <td width="70">{{postItem.date}}</td>
        </tr>
    </tbody>
</table>

控制器设置如下：

angular.module('myApp')
    .controller('PostListController', function($scope, $http) {

        var postsList = [];
        var postsListSummary = [];
        var postsListMain = [];

        $http.get('dummy_content.json')
          .then(function(res){
          postsList = res.data;

          for (var iSummary = 0; iSummary < 10;iSummary++) {
              postsListSummary[iSummary] = postsList[iSummary];
           }

          for (var iMain = 0; iMain < postsList.length;iMain++) {
             postsListMain[iMain] = postsList[iMain];
          }

       });

       $scope.postsSummary = postsListSummary;
       $scope.postsMain = postsListMain;

     });

我想要做的是当我声明一个og-post-list元素是通过我的页面属性传递一个值。

<og-post-list page="postsSummary"></og-post-list>

此值{{page}}应该转到templateURL中的ng-repeat部分，然后拉出我控制器中显示的相应数组，以填充我的表

<tr ng-repeat="postItem in {{page}} | orderBy:'toString()' | orderBy:'date':true | filter:searchText">

但是我看到这是不允许的？为什么这是告诉我的指令显示两个数组之一的更好方法。 2个数组之间的唯一区别是1个数组只包含10个项目，数组2包含从我的json文件中提取的所有元素

Answer 1

您可以使用compile函数在执行ng-repeat的编译功能之前修改模板。

例如：

app.directive('ogPostList', function() {
  return {
    restrict: 'E',
    templateUrl: 'postList.html',
    compile: function compile(tElement, tAttrs) {

      tElement.html(tElement.html().replace('{{page}}', tAttrs.page));

      return {
        pre: function preLink(scope, iElement, iAttrs) {},
        post: function postLink(scope, iElement, iAttrs) {}
      };
    },
  };
});

演示： http://plnkr.co/edit/whwwHTZfMvlABlfkhjKK?p=preview

另一种解决方案是使用第三个变量，例如postsDisplay，并在ng-repeat中使用它。然后，您可以将postsDisplay设置为postsSummary或postsMain并在它们之间切换。

将属性值传递给angularjs中的ng-repeat

1 个答案: