Using Angular Custom Direktiven

Question

Ich habe vor kurzem Angular JS gelernt und habe ein vernünftiges Verständnis für die Grundlagen, ich habe andere 'How tos' und Antworten hier angesehen, aber ich kann immer noch nicht meinen Kopf um benutzerdefinierte Richtlinien und Verwenden von $ scope in ihnen.

Ich hoffe, dass jemand mir erklären kann, wo ich falsch gelaufen bin und was ich unter Laien machen sollte.

Vielen Dank im Voraus:

Ich mag <tablerow></tablerow> zeigen, was alles in $ scope.tabledata in der Vorlage ist. Hier

ist ein Link auf die 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>' 
    } 
}); 

Answer 1

ich habe leicht verändert Ihre json. es funktioniert fine.Here meine jsfiddle Link-

Angular JS Custom Directive

und hier ist mein 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> 

ist

Answer 2

Dies scheint der Fall zu sein, weil tablerow ist kein gültiges Kind-Element eines table. Was Sie tun können, ist stattdessen ein <tr tablerow> verwenden und dieses Element ersetzen:

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

Verbrauch:

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

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

Aber ich denke, es wäre sauberer sein, nur in den Daten zu dem Pass Anweisung, anstatt davon auszugehen, dass die Daten im übergeordneten Bereich enthalten sind. Etwas wie folgt aus:

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

Mit Nutzung:

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

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