Question

我正在与Angular挣扎。我无法定义最佳实践＆＃34;为了我想要的。

我需要显示一个或多个数组。我将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">。

到目前为止我的问题：指令是好的方式＆＃34;这样做？我也想在$ scope上没有所有这个变量的情况下调用它，直接将它们赋予指令。

Answer 1

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

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

<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);

服务，需要在指令之前加载：

(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指令基础。

数组的angular指令

1 个答案: