• 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=" 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>
  • 相关阅读:
    查看数据库中指定用户下每个表占的实际空间大小
    数据库中查询列数据是否有重复
    oracle查看数据库的字符集
    【转】oracle数据库中varchar2陷阱
    cursor详解
    vs报算术运算溢出的错误
    count(1)比count(*)效率高
    基于NPOI的Execl导入导出例子
    day4-2数组及方法
    day4-1深入理解对象之创建对象
  • 原文地址:https://www.cnblogs.com/lindsayzhao103011/p/3345594.html
Copyright © 2020-2023  润新知