使用Angular Custom指令

保罗·休ume

我最近一直在学习Angular JS，并且对基础知识有一定的了解，我在这里查看了其他“操作方法”和答案，但是我仍然无法绕过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>'
  }
});

雅利安人

我已经稍微改变了您的json。效果很好。这是我的jsfiddle链接

Angular JS自定义指令

这是我的代码

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。