使用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/