码迷,mamicode.com
首页 > Web开发 > 详细

angularJS自定义指令scope代替link

时间:2015-05-11 19:38:49      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

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

 

angularJS自定义指令scope代替link

标签:

原文地址:http://www.cnblogs.com/zzq-include/p/4495096.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!