使用Angular自定义指令

Question

我最近一直在学习Angular JS，并且对基础知识有合理的把握，我已经看过其他的“How to Tos”和答案，但是我仍然无法将自己的头包裹在Custom Directives和使用$ scope。

我希望有人可以向我解释我出错的地方以及我应该用俗语说的话。

在此先感谢：

我想<tablerow></tablerow>显示什么模板在$ scope.tabledata一切。

这里是对的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

我稍微改变了你的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

这似乎发生，因为tablerow不是table的一个有效的子元素。你可以做的是改为使用<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/