Question

我是AngularJS的新手，我正在尝试创建一个可重用的任何类型实体列表（例如：待办事项，联系人等）。每种实体类型都应该有不同类型的表示。此外，此列表应该可以通过专用实体控制器中定义的任何属性进行排序。

我能够通过以下标记实现这一目标：

<entitylist>

    <entitylist:orderby>
        <option value="created">Created</option>
        <option value="name">Name</option>
    </entitylist:orderby>

    <entitylist:items>
        <entitylist:item ng-repeat="entity in entities | orderBy:orderby" ng-click="showDetails(entity)">
            <input type="checkbox" ng-model="entity.completed"/> {{ entity.title }}
        </entitylist:item>
    </entitylist:items>

</entitylist>

但是对每种实体类型使用此模板似乎是多余的。然后我尝试了类似这样的东西（实体模板）：

<entitylist sortable="sortable" entities="todos">
    <input type="checkbox" ng-model="entity.completed"/> {{ entity.title }}
</entitylist>

使用以下指令：

angular.module('app.components')

    .directive('entitylist', function() {
        return {
            restrict: 'E',
            controller: 'EntityListController',
            replace: true,
            templateUrl: 'components/entitylist/entitylist.tpl.html',
            transclude: true,
            scope: {
                entities: '='
            }
        };
    })

    .controller('EntityListController', ['$scope', '$rootScope', function($scope, $rootScope) {
        $scope.orderby = $scope.$parent.orderby;
        $scope.sortable = $scope.$parent.sortable;
    }])

;

控制器在ui-router状态下）：

controller: ['$scope', '$state', 'entities',
    function( $scope,   $state,   entities) {
        $scope.todos = entities;
        $scope.orderby = 'name';
        $scope.sortable = [{value: 'name', name: 'Name'}, {value: 'created', name: 'Created'}];
    }
]

指令模板（components / entitylist / entitylist.tpl.html）：

<div class="entitylist">

    <div class="entitylist-nav">

        <select ng-model="orderby" class="form-control">
            <option ng-repeat="sort in sortable" value="sort.value">{{ sort.name }}</option>
        </select>

    </div>

    <ul class="entity-list">
        <li ng-repeat="entity in entities | orderBy:orderby">
            <div ng-transclude=""></div>
        </li>
    </ul>

</div>

但是在这里，我在使用ng-repeat和ng-transclude的孤立范围进行了数小时的努力，并且无法实现这一目标。我创建了 jsFiddle 。

我的问题是：我走在正确的轨道上吗？实现这样的目标的角度方式是什么？我已经谷歌搜索了几天相关的东西，但没有成功。有没有这方面的例子（单列表教程除外）？

在Angularjs中创建可重用的列表

0 个答案: