您的位置：首页 > Web前端 > AngularJS

AngularJS directive指令

2016-06-27 16:19 477 查看

<!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>"
}
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript angularJS

相关文章推荐

新的分享

章节导航