angularJS自定义指令scope代替link

浏览数：31 / 时间：2015年06月09日

<!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>