<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-app="scope"> <hello></hello> <div ng-controller="h1"> <input type="text" ng-model="hh"/> <hello1 attr1="hh"></hello1> </div> <hr/> <div ng-controller="h2"> <hello2 greet="alertH(name)"></hello2> <hello2 greet="alertH(name)"></hello2> <hello2 greet="alertH(name)"></hello2> </div> </body> <script src="angular.js"></script> <script> var app=angular.module("scope",[]); app.directive("hello",function(){ return{ restrict:"AE", scope:{}, template:"<div><input type='text' ng-model='name'/> {{name}}</div>", replace:true } }); app.controller("h1",function($scope){ $scope.hh="哈哈"; }); app.directive("hello1", function(){ return{ restrict:"AE", scope:{ //attr1:"@"//单向传递字符串 attr1:"="//双向绑定字符串 }, template:"<input type='text' ng-model='attr1'/><div>{{attr1}}</div>" } }); //scope & 用法 app.controller("h2",function($scope){ $scope.alertH=function(name){ alert("hello "+name); } }); app.directive("hello2", function(){ return{ restrict:"AE", scope:{ //attr1:"@"//单向传递字符串 //attr1:"="//双向绑定字符串 greet:"&"//可绑定非字符串 }, template:"<input type='text' ng-model='userName'/><br/>"+ "<input type='button' value='get' ng-click='greet({name:userName})'/><br/>" } }); </script> </html>