angularjs指令-控制器

来源：互联网发布：js遍历json对象数组编辑：程序博客网时间：2024/04/30 16:33

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>

阅读全文

0 0