AngularJs中自定义指令directive的controller属性

最新推荐文章于 2019-04-27 17:08:47 发布

K'illCode

最新推荐文章于 2019-04-27 17:08:47 发布

阅读量361

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277515

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

controller是AngularJs中的控制器，在控制器里边可以接受后台的数据，并且定义变量显示给前端，controller也可以作为自定义指令directive的属性存在，代码如下：

1.html中的代码：

 
       01<!doctype html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8" />
 
       05    <title>Document</title>
 
       06</head>
 
       07<body ng-app="app">
 
       08    <zym-blog></zym-blog>
 
       09</body>
 
       10</html>
 
       11<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
 
       12<script type="text/javascript">
 
       13    var m = angular.module('app', []);
 
       14    m.directive('zymBlog', [function(){
 
       15        return {
 
       16            restrict : 'AE',
 
       17            templateUrl : './2.html',
 
       18            replace : true,
 
       19            controller : ['$scope', function($scope){
 
       20                $scope.data = [
 
       21                    {id: 1, name: 'zym', age: 23},
 
       22                    {id: 2, name: 'zyy', age: 24},
 
       23                    {id: 3, name: 'zhangsan', age: 25},
 
       24                    {id: 4, name: 'lisi', age: 26}
 
       25                ]
 
       26            }]
 
       27        }
 
       28    }]);
 
       29</script>

2.html中的代码：

 
       01<div>
 
       02    <table cellpadding="0" cellspacing="0"border="1">
 
       03        <thead>
 
       04            <tr>
 
       05                <td>编号</td>
 
       06                <td>姓名</td>
 
       07                <td>年龄</td>
 
       08            </tr>
 
       09        </thead>
 
       10        <tbody>
 
       11            <tr ng-repeat="(key, value) in data">
 
       12                <td>{{value.id}}</td>
 
       13                <td>{{value.name}}</td>
 
       14                <td>{{value.age}}</td>
 
       15            </tr>
 
       16        </tbody>
 
       17    </table>
 
       18</div>