directive小demo

最新推荐文章于 2022-11-24 15:55:28 发布

yyl50

最新推荐文章于 2022-11-24 15:55:28 发布

阅读量334

点赞数

本文链接：https://blog.csdn.net/yyl50/article/details/44313783

版权

分享directive小demo

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