Angular Customディレクティブを使用する

Question

私は最近、Angular JSを学んでいて、基本について合理的な把握をしています。私は他のHow Tosと答えを見てきましたが、カスタムディレクティブとそれらの中に$ scopeを使用します。

私はどこに間違っていたのか、そして私がレイマンの言葉でやっているべきことを誰かに教えてくれることを願っています。事前に

ありがとう：

私は<tablerow></tablerow>が$ scope.tabledata内のすべてのテンプレートに何があるか表示したいです。 tablerowがtableの有効な子要素ではないので、これが起こっているようだ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

私は少しあなたのJSONを変更しました。 fine.Hereが私jsfiddleリンク

Angular JS Custom Directive

であり、ここで私のコードで動作しますだ

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> 

Answer 2

- ここ

はJSFiddleへのリンクです。あなたにできることは代わりに<tr tablerow>を使用し、その要素を置き換えるです：

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

使用法：

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

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

しかし、私はそれだけにデータを渡すためにきれいだと思いますディレクティブを使用して、データが親スコープにあると仮定するのではなく、使用に

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

：このような何か

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

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