angular js 指令中@ = &的学习 

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div,#div2 div{ width:200px; height:200px; border:1px red solid; display:none;}
#div1 input.active , #div2 input.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="angular.min.js"></script>
<!--<script>

var m1 = angular.module('myApp',[]);
m1.directive('myTab',function(){
   return {
      restrict : 'E',
      replace : true,
      scope : {
         myId : '@',
         myData : '='
      },
      controller : ['$scope',function($scope){
         $scope.name = 'miaov';
      }],
      templateUrl : 'temp3.html',
      link : function(scope,element,attr){
         //console.log(scope.name);
         //console.log(element);
         //console.log(attr.myId);
         element.delegate('input','click',function(){
            $(this).attr('class','active').siblings('input').attr('class','');
            $(this).siblings('div').eq( $(this).index() ).css('display','block').siblings('div').css('display','none');
         });
      }
   };
});

m1.controller('Aaa',['$scope',function($scope){

   $scope.data1 = [
      {title:'数学',content:'111111111'},
      {title:'语文',content:'222222222'},
      {title:'英语',content:'333333333'}
   ];
   $scope.data2 = [
      {title:'物理',content:'444444444'},
      {title:'化学',content:'555555555'}
   ];

}]);


</script>
-->
</head>

<body ng-controller="Aaa">
<my-tab my-id="div1" my-data="data1" my-name="name"></my-tab>
<my-tab my-id="div2" my-data="data2" my-name="name"></my-tab>
<script>
    var app=angular.module('myApp',[]);
    app.directive('myTab',function(){
        return{
            restrict:'E',
            replace:true,
            scope:{
                myId:'@',
                myData:'=',
                myName:'@'
            },
            controller:['$scope',function($scope){
                $scope.name='miaov';
            }],
            templateUrl:'temp3.html',
            link:function(scope,element,attr){
                console.log(scope.myName);
                console.log(element);
                console.log(attr.myId);
                element.delegate("input","click",function(){
                    $(this).addClass("active").siblings("input").removeClass("active");
                    $(this).siblings("div").eq($(this).index()).show().siblings("div").hide();
                })
            }
        }
    });
    app.controller('Aaa',['$scope',function($scope){
        $scope.data1=[
            {title:'数学',content:'11111'},
            {title:'语文',content:'22222'},
            {title:'英语',content:'33333'}
        ];
        $scope.data2=[
            {title:'物理',content:'44444'},
            {title:'生物',content:'55555'}
        ];
        $scope.name="dn"
    }])
</script>
</body>
</html>
scope 中@ 相当于是单项数据绑定，如上述例子，如果myName 是单向绑定，那么输出结果scope.myName结果为name;当为双向绑定的时候输出结果为dn
posted @ 2016-08-03 15:43  不烦不凡  阅读(230)  评论(0)    收藏  举报