使用 Angular 自定义指令答案

【问题标题】：Using Angular Custom directives使用 Angular 自定义指令
【发布时间】：2016-08-04 14:38:40
【问题描述】：

我最近一直在学习 Angular JS，并且对基础知识有了合理的掌握，我在这里查看了其他“操作方法”和答案，但我仍然无法理解自定义指令并在其中使用 $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>'
  }
});

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

我稍微改变了你的 json。它工作正常。这是我的 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>

【讨论】：

【解决方案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/

【讨论】：