Using Angular Custom directives

Question

I've recently been learning Angular JS and have a reasonable grasp on the basics, I have looked at other 'How tos' and answers on here but I still can't wrap my head around Custom Directives and using $scope within them.

I'm hoping someone can explain to me where I've gone wrong and what I should be doing in laymans terms.

Thanks in advance:

I want <tablerow></tablerow> to display what's in the template for everything in $scope.tabledata.

Here is a link to the JSFiddle - https://jsfiddle.net/paulhume/tt29411t/14/

var myApp = angular.module('myApplication', []);

myApp.controller('myController', ['$scope', function($scope) {
    $scope.tabledata = [
        { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' },
      { cellone: 'One', celltwo: 'Two', cellthree: 'Three' }
    ];
}]);

myApp.directive('tablerow', function() {
    return {
    restrict: 'E',
    scope: { 'rows': '=tabledata' },
    template: '<tr ng-repeat="row in rows"><td>Cell One</td><td>Cell Two</td></tr>'
  }
});

Aryan · Accepted Answer · 2016-08-03 05:35:08Z

i have slightly changed your json. it's works fine.Here is my jsfiddle Link

Angular JS Custom Directive

and here is my code

var myApp = angular.module('Application', []);

myApp.controller('myController', ['$scope', function($scope) {
    $scope.tabledata = [{
        name:[{value:"one"},{value:"Two"},{value:"Three"}]
    }, {
        name:[{value:"one"},{value:"Two"},{value:"Three"}]
    }, {
        name:[{value:"one"},{value:"Two"},{value:"Three"}]
    }, {
        name:[{value:"one"},{value:"Two"},{value:"Three"}]
    }];
}]);

myApp.directive('tablerow', function() {
    return {
        restrict: 'E',
        scope: {
            tabledata: "=tabledata"
        },
        template: '<table><tr ng-repeat="data in tabledata"><td ng-repeat="name in data.name">{{name.value}}</td></tr></table>'
    }
});


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="Application" ng-controller="myController">
    {{ tabledata }}

    <hr>
    <tablerow tabledata="tabledata"></tablerow>
    <table>
        <tablerow></tablerow>
    </table>
</div>

devqon · Accepted Answer · 2016-08-04 06:38:40Z

This seems to be happening because tablerow isn't a valid child element of a table. What you can do is instead use a <tr tablerow> and replace that element:

myApp.directive('tablerow', function() {
    return {
        restrict: 'A',
        scope: false,
        replace: true,
        template: '<tr ng-repeat="row in tabledata"><td ng-bind="row.cellone"></td><td ng-bind="row.celltwo"></td></tr>'
    }
});

Usage:

<table>
    <tr tablerow></tr>
</table>

https://jsfiddle.net/tt29411t/15/

But I think it would be cleaner to just pass in the data to the directive, instead of assuming the data is on the parent scope. Something like this:

myApp.directive('tabledata', function() {
    return {
        restrict: 'A',
        scope: {
                rows: "=tabledata"
        },
        template: '<tr ng-repeat="row in rows"><td ng-bind="row.cellone"></td><td ng-bind="row.celltwo"></td></tr>'
    }
});

With usage:

<table tabledata="tabledata"></table>

https://jsfiddle.net/tt29411t/19/

Collectives™ on Stack Overflow

Using Angular Custom directives

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related