Question

我最近一直在学习Angular JS并且对基础知识有一个合理的把握，我已经看过其他的＆＃39; How to tos＆＃39;并在这里给出答案，但我仍然无法围绕自定义指令并在其中使用$ 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

这似乎正在发生，因为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/

Answer 2

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

使用Angular Custom指令

2 个答案: