angular directive for an array

Question

i'm struggling with Angular. I can't define the "best practice" for what i want.

I need to display one or many array. I define the HTML as this :

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

It work for a single array. CodePen exemple Here : http://codepen.io/anon/pen/gpXwbz

Now : I would like it to be callable as a directive. like <myArrayDisplay searchtab="sth" dataTabTitle="sthElse" dataTab="sthOther">.

My question so far : Is directive the "good way" for doing this? I also want to call it without having all this variable on $scope, just giving them to the directive directly.

Have you looked into performing this using the parent controller? I did the same thing myself using this and specifying the name of the variable to the directive/controller below — Stephen Rodriguez
– Stephen Rodriguez, Commented Jun 23, 2015 at 13:55
Apologyze I don't understand the question. I didn't try to create my own directive as I'm not sure it's a good idea in this case. And i try to remove the $parent in the same time — ssbb
– ssbb, Commented Jun 23, 2015 at 14:01

trees_are_great · Accepted Answer · 2015-06-23 14:12:26Z

A directive would be a good idea here. If you do not want to pass them through the controller $scope with bindings, then I suggest that you store them in a service. You can then inject this service into the directive controller and get the data from this service.

Note, the HTML for the directive needs to be hyphen seperated, whereas the javascript directive name is camelcase.

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

Directive:

(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, which needs to be loaded before the directive:

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

I will leave it to you to add the other data to the service.

Your HTML for the table can then be placed in /Templates/Directives/MyArray.html

As requested in comment, my preferred course on directive is angularjs directive fundamentals on Pluralsight.

Do you have any tutorial / simple code for that ? I'm not sure about what you mean, especialy on 'inject this service into the firective controller' .
By inject, I just mean put it in the controller decleration controller: function ($scope, myDataService) {. To make your js min safe you will need to also add square brackets infront of this and add it in there too.

Collectives™ on Stack Overflow

angular directive for an array

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related