数组的角度指令

Question

我正在努力使用 Angular。我无法为我想要的定义“最佳实践”。

我需要显示一个或多个数组。我将 HTML 定义为：

<form ng-show="searchtab">
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-search"></i></div>
            <input type="text" class="form-control" placeholder="Search da Fish" ng-model="searchFish">
        </div>      
    </div>
</form>
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <td ng-repeat="item in dataTabTitle">
                <a ng-click="$parent.sortType = item.column; $parent.sortReverse = !sortReverse">
                    {{ item.title}}
                    <span ng-show="sortType == '{{item.column}}' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == '{{item.column}}' && sortReverse" class="fa fa-caret-up"></span>
                </a>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in dataTab | orderBy:sortType:sortReverse | filter:searchFish">
            <td ng-repeat="(key, value) in item">{{value}}</td>
        </tr>
    </tbody>
</table>

它适用于单个数组。 CodePen 示例在这里：http://codepen.io/anon/pen/gpXwbz

现在：我希望它可以作为指令调用。喜欢<myArrayDisplay searchtab="sth" dataTabTitle="sthElse" dataTab="sthOther">。

到目前为止我的问题：指令是这样做的“好方法”吗？我还想在 $scope 上不包含所有这些变量的情况下调用它，直接将它们提供给指令。

Answer 1

指令在这里是个好主意。如果您不想通过带有绑定的控制器 $scope 传递它们，那么我建议您将它们存储在服务中。然后，您可以将此服务注入指令控制器并从此服务获取数据。

注意，指令的 HTML 需要用连字符分隔，而 javascript 指令的名称是驼峰式。

<my-array-display></my-array-display>

指令：

(function () {

  angular.module("myApp").directive("myArrayDisplay", function () {
        return {
            restrict: 'E',
            templateUrl: '/Templates/Directives/MyArray.html',
            scope: {
                // Can additionally pass something in here
            },
            controller: function ($scope, myDataService) {

                $scope.mydata = myDataService.getDataTab();

            }
    });

}).call(this);

Service，需要在指令之前加载：

(function () {

    angular.module("myApp").factory('myDataService', [function () {

        var dataTab = [
            { name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
            { name: 'Philly', fish: 'Tuna', tastiness: 4 },
            { name: 'Tiger', fish: 'Eel', tastiness: 7 },
            { name: 'Rainbow', fish: 'Variety', tastiness: 6 }
        ];

        var getDataTab = function () {

            return dataTab
        };

        return { getDataTab: getDataTab };

    }]);

}).call(this);

我会留给您将其他数据添加到服务中。

然后可以将表格的 HTML 放入 /Templates/Directives/MyArray.html

根据评论中的要求，我首选的指令课程是 Pluralsight 上的 angularjs 指令基础。