angular指令传值（源码及注释）

最新推荐文章于 2021-12-19 23:35:26 发布

zhenghao35791

最新推荐文章于 2021-12-19 23:35:26 发布

阅读量5.3k

点赞数 1

分类专栏： angular 文章标签： angular 指令

本文链接：https://blog.csdn.net/zhenghao35791/article/details/53765289

版权

angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

angular指令传值（源码及详细注释）

html代码部分

代码块语法遵循标准markdown代码，例如：

<html ng-app='expanderModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
        <script src="js/angular-1.3.0.js"></script>
        <script src="ExpanderSimple.js"></script>
    </head>
    <body>
        <div ng-controller='SomeController'>
            <!--
                      controllerTitle这个参数是此div的controller内部的数据，所以能直接调用
            -->
            <expander class='expander'
                      expander-title='controllerTitle'
                      expander-text='controllerText'>
<!--
                {{controllerText}}
-->
                <h1>第一个指令html原本的标题h1</h1>
                <p>第一个指令html原本的内容ppppppppppppp</p>
            </expander>
        </div>
        <div ng-controller='SomeController2'>
            <expander class='expander'
                      expander-title='controllerTitle'
                      expander-text='controllerText'>
                <!--
                                {{controllerText}}
                -->
                <h1>第二个指令html原本的标题h1</h1>
                <p>第二个指令html原本的内容ppppppppppppp</p>
            </expander>
        </div>
    </body>
</html>

js代码部分

代码块语法遵循标准markdown代码，例如：

var expanderModule=angular.module('expanderModule', []);
expanderModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,//指令里面定义的template变成html里面指令包裹的内容
        transclude : true,//保留html页面里面指令里面原本包裹的内容，放到ng-transclude里面
        scope : {//每个指令被调用的时候都会有自己独立的scope
            title : '=expanderTitle',//传入之后，在指令内部就有了scope.title
            // controllerTitle是父级scope上的元素，
            // 这里的作用就是把父级scope.controllerTitle（通过属性expanderTitle）
            // 传值给指令当前作用域内scope.title上
            text : '=expanderText'//传入之后，在指令内部就有了scope.title
        },
        template : '<div>'
                 + '<div class="title" ng-click="toggle()">{{title}}aaaa</div>'
                 + '<div class="body" ng-show="showMe" ng-transclude=""></div>'
                 + '<div class="body" ng-show="showMe">{{text}}bbbbbb</div>'
                 + '</div>',
        link : function(scope, element, attrs) {
      //操作的scope是自己的独立scope
            scope.showMe = false;
            scope.toggle = function() {
                scope.showMe = !scope.showMe;
                console.log(scope);//独立作用域的scope，该指令独立的scope，只有scope.title而没有$scope.controllerText
                //通过打印，可以看到，当前指令scope中有showMe，title，text,toggle等属性
        console.log(scope.title);//独立作用域的scope，该指令独立的scope，只有scope.title而没有$scope.controllerText
                console.log(scope.text);//独立作用域的scope，该指令独立的scope，只有scope.title而没有$scope.controllerText
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope) {
    $scope.controllerTitle = '我是第一个controller的标题';
      $scope.controllerText = '我是第一个controller的内容内容内容内容内容内容内容内容内容内容内容内容内容';
});
expanderModule.controller('SomeController2',function($scope) {
  $scope.controllerTitle = '我是第二个controller的标题';
  $scope.controllerText = '我是第二个controller的内容内容内容内容内容内容内容内容内容内容内容内容内容';
});

css样式部分

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

浏览器运行截图

>

尾注

上述例子详细说明了指令是如果被调用和复用的，以及scope是如何在指令和父级controller，多个controller之间传递的

关于指令中的scope对象：scope[boolean or object]属性，该属性是用来定义指令的scope的范围，默认情况下是false。
即该指令继承了父controller的scope，可以随意的使用父controller的scope里的属性，但是这样的话就会污染到父scope里的属性，这样是不可取的。

一般来说我们可以让scope取以下两个值：true和{}，
scope：true时，angular为这个指令创建了一个继承于父scope的scope，然后在指令的template属性中，可以直接使用{{}}从父scope中继承过来属性。
scope:{{}}时，表示创建独立作用域scope，不会继承父scope的属性。但是在有的时候我们也要需要访问父scope里的属性或者方法，有@，=和&的方法可以实现。

link里面参数解释
link : function(scope, element, attrs) {}

element简单说就是$(‘my-dialog’)
attrs是个map，内容是你这个directive上的所有属性，例如：你在页面上如果这样写了directive:

<my-dialog type="modal" animation="fade"></my-dialog>

那attrs就是：
{
type: 'modal',
animation: 'fade'
}

>elm：输出一个元素数组，数组中的每个元素是调用directive的DOM树

attrs:输出一个Object, Object内是该DOM元素的各种属性方法

zhenghao35791

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angular指令传值（源码及注释）

angular指令传值（源码及注释）目录angular指令传值源码及注释目录html代码部分js代码部分css样式部分html代码部分代码块语法遵循标准markdown代码，例如：html ng-app='expanderModule'> head> meta http-equiv="content-type"
复制链接

扫一扫