AngularJS directive指令

最新推荐文章于 2024-07-20 23:54:17 发布

Gerry_

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量383

点赞数

文章标签： javascript angularJS

本文链接：https://blog.csdn.net/zrh1121/article/details/51769112

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="stylesheet" href="css/index.css"></link>
		<link rel="stylesheet" href="css/ionic.min.css"></link>
		<script type="text/javascript" src="js/ionic.min.js"></script>
		<script type="text/javascript" src="js/ionic.bundle.min.js"></script>

		<title></title>
	</head>

	<body ng-app="myApp" ng-controller="indexCtrl">

		<ion-header-bar class="bar bar-dark">
			<h1 class="title">AngularJS</h1>
		</ion-header-bar>
		<ion-content>

			
			<add-Book-Button zrh="ruihua"></add-Book-Button>
		</ion-content>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>

js:

单值$scope:

var app = angular.module("myApp", ["ionic"])
app.controller("indexCtrl", function($scope) {
	$scope.ruihua = "zhangruihua";
});
app.directive("addBookButton", function() {
	return {
		restrict: "E",
		transclude: true,
		scope: {
			zrh: '='
		},
		template: "<div id='divtest'>{{zrh}}</div>"
	}
})

遍历$scope对象：

var app = angular.module("myApp", ["ionic"])
app.controller("indexCtrl", function($scope) {
	$scope.ruihua = "zhangruihua";
	$scope.num={
		1:'a',
		2:'b',
		3:'c',
		4:'d',
		5:'e'
	}
});
app.directive("addBookButton", function() {
	return {
		restrict: "E",
		transclude: true,
		scope: {
			zrh: '='
		},
		template: "<div id='divtest' ng-repeat='test in zrh'>{{test}}</div>"
	}
})

Gerry_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS directive指令

AngularJS js:var app = angular.module("myApp", ["ionic"])app.controller("indexCtrl", function($scope) { $scope.ruihua = "zhangruihua";});app.directive("addBookButton
复制链接

扫一扫