AngularJS directive指令

来源：互联网发布：施乐cp105b监控软件编辑：程序博客网时间：2024/06/14 18:28

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

0 0