• Directive间的通信


    Directive间的通信

    源自大漠的《AngularJS》5个实例详解Directive(指令)机制

    这个例子主要的难点在于如何在子Expander里面访问外层Accordion的scope中的数据

    注释解读一下

    JS代码:

    var expModule=angular.module('expanderModule',[])
    expModule.directive('accordion', function() {
        return {
            restrict : 'EA',
            replace : true,
            //这里没有定义scope,将使用元素上的scope,就是下面ng-controller指定的SomeController的scope
            transclude : true,
            template : '<div ng-transclude></div>',
            controller : function() {
                var expanders = [];
                this.gotOpened = function(selectedExpander) {
                    angular.forEach(expanders, function(expander) {
                        if (selectedExpander != expander) {
                            expander.showMe = false;
                        }
                    });
                }
                this.addExpander = function(expander) {
                    expanders.push(expander);
                }
            }
        }
    });
    
    expModule.directive('expander', function() {
        return {
            restrict : 'EA',
            replace : true,
            transclude : true,
            require : '^?accordion', //依赖
            scope : {
                title : '=expanderTitle'
            },
            template : '<div>'
                       + '<div class="title" ng-click="toggle()">{{title}}</div>'
                       + '<div class="body" ng-show="showMe" ng-transclude></div>'
                       + '</div>',
            link : function(scope, element, attrs, accordionController) {
                //注意link的第四个参数
                scope.showMe = false;
                accordionController.addExpander(scope);//调用外层指令的方法
                scope.toggle = function toggle() {
                    scope.showMe = !scope.showMe;
                    accordionController.gotOpened(scope);//调用外层指令的方法
                }
            }
        }
    });
    
    expModule.controller("SomeController",function($scope) {
        $scope.expanders = [{
            title : 'Click me to expand',
            text : 'Hi there folks, I am the content that was hidden but is now shown.'
        }, {
            title : 'Click this',
            text : 'I am even better text than you have seen previously'
        }, {
            title : 'Test',
            text : 'test'
        }];
    });
    

    HTML代码:

    <html ng-app="expanderModule">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <script src="../angular-1.0.3/angular.min.js"></script>
            <link rel="stylesheet" type="text/css" href="Accordion.css"/>
        </head>
        <body ng-controller='SomeController' >
            <accordion>
                <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                    {{expander.text}}
                </expander>
            </accordion>
        </body>
        <script src="Accordion.js"></script>
    </html>
    

    CSS代码:

    .expander {
        border: 1px solid black;
         250px;
    }
    
    .expander>.title {
        background-color: black;
        color: white;
        padding: .1em .3em;
        cursor: pointer;
    }
    
    .expander>.body {
        padding: .1em .3em;
    }
    

    运行效果:

    require option

    看看官网的原文怎么说

    The myPane directive has a require option with value ^^myTabs. When a directive uses this option, $compile will throw an error unless the specified controller is found. 
    .The ^^ prefix means that this directive searches for the controller on its parents. 
    .The ^ prefix would make the directive look for the controller on its own element or its parents; 
    .without any prefix, the directive would look on its own element only.
    .The ? prefix, if not found then pass null to the link as the fourth parameter
    

    link函数的参数

    Creating a Directive that Manipulates the DOM
    link takes a function with the following signature, function link(scope, element, attrs, controller, transcludeFn) { ... }, where:
    . scope is an Angular scope object.
    . element is the jqLite-wrapped element that this directive matches.
    . attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
    . controller is the directive's required controller instance(s) or its own controller (if any). The exact value depends on the directive's require property.
    . transcludeFn is a transclude linking function pre-bound to the correct transclusion scope.

  • 相关阅读:
    反射和内置方法重写
    封装
    接口与抽象类 、多态
    面向对象--继承和组合
    python对象
    模块导入
    python序列化模块
    time random sys os 模块
    python re模块和collections
    python各种推导式
  • 原文地址:https://www.cnblogs.com/wancy86/p/6049558.html
Copyright © 2020-2023  润新知