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

阅读() @2018-10-29 18:16:09

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

1.html中的代码:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
</head>
<body ng-app="app">
	<zym-blog></zym-blog>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.directive('zymBlog', [function(){
		return {
			restrict : 'AE',
			templateUrl : './2.html',
			replace : true,
			controller : ['$scope', function($scope){
				$scope.data = [
					{id: 1, name: 'zym', age: 23},
					{id: 2, name: 'zyy', age: 24},
					{id: 3, name: 'zhangsan', age: 25},
					{id: 4, name: 'lisi', age: 26}
				]
			}]
		}
	}]);
</script>

2.html中的代码:

<div>
	<table cellpadding="0" cellspacing="0" border="1">
		<thead>
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="(key, value) in data">
				<td>{{value.id}}</td>
				<td>{{value.name}}</td>
				<td>{{value.age}}</td>
			</tr>
		</tbody>
	</table>
</div>

controller属性不需要再添加控制器名称,他的值是一个数组。

微信二维码