angularjs指令-控制器

最新推荐文章于 2023-07-17 14:36:24 发布

裂魂人1214

最新推荐文章于 2023-07-17 14:36:24 发布

阅读量292

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/b422761838/article/details/73728983

版权

angularjs 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>