angularjs指令-控制器
阿新 • • 發佈：2019-02-18
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>