angularjs指令-控制器
发布时间:2020-12-17 09:10:20 所属栏目:安全 来源:网络整理
导读:1.指令-控制器.html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleangularjs指令/title link rel="stylesheet" type="text/css" href="bootstrap.min.css" / script src="jquery-2.1.3.min.js"/script script src="bootstrap.min.js"/script
1.指令-控制器.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>angularjs指令</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> <script src="jquery-2.1.3.min.js"></script> <script src="bootstrap.min.js"></script> <script src="angular.min.js"></script> </head> <!-- directive调用参数时,需要在scope里面指定,比如template要调用controller里面的name, 则需要先在渲染的span里面定义一个qw-color标签,directive的scope里面定义color取qw-color的name 调用函数时用的是'&',调用参数是用的是'='--> <body ng-app="kongwc"> <qing-wei></qing-wei> <!-- 多个table可以在此添加多条--> <qing-wei></qing-wei> </body> <script> var app = angular.module('kongwc',[]); app.directive('qingWei',function () { return { restrict : 'E',replace : true,templateUrl : 'table.html',controller : (function ($scope) { $scope.datas = [ { id: "1",name : "小白牛",phone : "13465352119" },{ id: "2",name : "迷迭香",phone : "1565354662" },{ id: "3",name : "龙之谷",phone : "13765354891" } ]; }) } }); </script> </html> 2.table.html <table class="table table-striped"> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> </tr> <tr ng-repeat="data in datas"> <td>{{data.id}}</td> <td>{{data.name}}</td> <td>{{data.phone}}</td> </tr> </table> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |