angular directive =,&

 <  html   lang  ="en"   ng-app  ="Demo"  > 
 <  head  > 
     <  meta   charset  ="utf-8"  > 
     <  title  > Directive Html </  title  > 
     <  script   src  ="angular.min.js"  ></  script  > 
     <  script   type  ="text/javascript"  > 
         var   app   =   angular.module(  '  Demo  '  , [], angular.noop);
        app.directive(  '  ysBlock  '  ,   function  (){
              return   {
                compile: angular.noop,
                template:   '  <div style="width: 200px; border: 1px solid black;">  '  + 
                                 '  <h1 style="background-color: gray; color: white; font-size: 22px;">{{ title }}</h1>  '  + 
                                 '  <div>{{ text }}</div>  '  + 
                            '  </div>  '  ,
                replace:   false  ,
                scope: {
                    title:   '  @titlearr  '  ,   //  directive里面的title取值为element属性titlearr的动态的值{{title}} 
                     text:   '  =textarr  '  //  directive里面text的取值为element属性textarr的值text在element中scope中的值，scope.text 
                 },  //  这里的=title其实用的是 
                 restrict:   '  E  '  
            };
        });
        app.controller(  '  TestCtrl  '  ,   function  ($scope){
            $scope.title   =   '  标题在这里  '  ;
            $scope.text   =   '  内容在这里  '  ;
        });
      angular.bootstrap(document, [  '  Demo  '  ]);
      </  script  > 
 </  head  > 
 <  body  > 
   <  div   ng-controller  ="TestCtrl"  > 
     <  ys-block   titlearr  ="{{title}}"   textarr  ="text"  ></  ys-block  > 
     <  p  > 标题:  <  input   ng-model  ="title"   /></  p  > 
     <  p  > 内容:  <  input   ng-model  ="text"   /></  p  > 
     <  span  > {{title}},{{text}} </  span  > 
   </  div  > 
 </  body  > 
 </  html  > 

 <  html   lang  ="en"   ng-app  ="Demo"  > 
 <  head  > 
     <  meta   charset  ="utf-8"  > 
     <  title  > Directive Html </  title  > 
     <  script   src  ="angular.min.js"  ></  script  > 
     <  script   type  ="text/javascript"  > 
         //  &attr 是包装一个函数出来，这个函数以节点所在的 scope 为上下文这里是一个上下文交错的环境，通过 & 这种机制，让指令的 scope 与节点的 scope 发生了互动 
         var   app   =   angular.module(  '  Demo  '  , [], angular.noop);
        app.directive(  '  a  '  ,   function  (){
              var   func   =   function  (element, attrs, link){
                      return   function   llink(scope){
                        console.log(scope);
                        scope.a();   //   执行了here = here + 1 所以虽然TestCtrl设置here为123，页面上最终的here为124 
                         scope.b();   //   执行了TestCtrl的show() 
                     
                        scope.show   =   function  (here){  //   ----点击是执行link里面的show(here)与TestCtrl无关 
                             console.log(  '  Inner,   '   +   here);
                            scope.a({here:   5  });  //   ---- 但是此处的scope.a({here: 5})，因为a执行的是TestCtrl的上下文，于是a传递的一个对象，里面的所有属性 
                                                 //  TestCtrl就全收下了，接着执行here = here+1，所以会显示6 
                         }
                    }
            }
              return   {
                compile: func,
                scope: {
                    a:   '  &abc  '  ,   //  scope.a是&abc 即：scope.a = function() {here = here +1;} here是TestCtrl的 
                     b:   '  &ngClick  '  //  scope.b是&ngClick 即：scope = function() {show(here);} 这里的show()和here都是TestCtrl的 
                 },
                restrict:   '  A  '  
            };
        });
    
        app.controller(  '  TestCtrl  '  ,   function  ($scope){
            $scope.here   =   123  ;
            console.log($scope);
            $scope.show   =   function  (here){
                console.log(here);
            }
        });
        angular.bootstrap(document, [  '  Demo  '  ]);
    </  script  > 
 </  head  > 
 <  body  > 
   <  div   ng-controller  ="TestCtrl"  > 
     <  div   a abc  ="here = here + 1"   ng-click  ="show(here)"  > 这里 </  div  > 
     <  div  > {{ here }} </  div  > 
   </  div  > 
 </  body  > 
 </  html  > 

 

查看更多关于angular directive =,&的详细内容...