javascript - 数组的 Angular Directive(指令)

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

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

请注意，该指令的 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

根据评论中的要求，我首选的指令类(class)是 Pluralsight 上的 angularjs 指令基础知识。