1、index.html:
<!DOCTYPE HTML>
<html ng-app="app"><head> <title>scopeAt</title> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.css"> <script src="../js/angular.js"></script></head><body><!-- 下面是指令scope作用域&符demo. --><div ng-controller="myCtrl"> <greeting gr="sayHello(name)"></greeting> <greeting gr="sayHello(name)"></greeting> <greeting gr="sayHello(name)"></greeting></div><script src="./scopeAnd.js"></script></body></html>2、scopeAnd.js:
var myModule = angular.module("app",[]);
myModule.controller('myCtrl', ['$scope', function($scope){ $scope.sayHello = function(name){ alert("Hello "+name); };}]);myModule.directive('greeting',function(){ return { restrict: 'AE', scope:{//本来这里独立的scope是与上面的全局$scope对象是不可通信的,但是这里用了&符,那么此处的scope就变的可以接受全局$scope中定义的方法了,&符号就表示引用$scope对象中定义的方法.这里的greet:就成了上面被调用方法的别名,形参。 // name:userName中的name就表示方法中的name形参,userNam表示实参,实参由ng-model="userName"绑定,获取文本框输入值传递进来. greet:'&gr'//这里绑定传递的还是属性,其实三种绑定策略传递都是属性值,@是表达式或ng-bind变量传值靠属性字串;=号是ng-model双向绑定传值靠属性;&是控制器中方法传递也靠属性,同一标签内都靠属性传递各种绑定的值. }, template:'<input type="text" ng-model="userName" /><br/>'+ '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>' }});