zoukankan      html  css  js  c++  java
  • angular 中 directive中的多个指令

    <div ng-controller="ctrl1">
        <superman weight length speed>superman</superman>
        <superman weight >weight</superman>
    </div>
    
    <script type="text/javascript">
        angular.module('myMoudle',[])
                .controller('ctrl1', ['$scope', function($scope){
                    
                }])
                .directive("superman", function(){
                    return {
                        restrict : "E",
                        scope : {},
                        controller : function($scope){
                            $scope.abilities = [];
    
                            this.addWeight = function(){
                                $scope.abilities.push("Weight");
                            }
    
                            this.addSpeed = function(){
                                $scope.abilities.push("Speed");
                            }
    
                            this.addLength = function(){
                                $scope.abilities.push("Length");
                            }
                        },
                        link : function(scope, element){
                            element.bind("mouseenter", function(){
                                console.log(scope.abilities);
                            })
                        }
                    }
                })
                .directive("weight", function(){
                    return {
                        restrict : "A",
                        require : "superman",
                        link : function(scope, element, attrs, superman){
                            superman.addWeight();
                        }
                    }
                })
                .directive("speed", function(){
                    return {
                        restrict : "A",
                        require : "superman",
                        link : function(scope, element, attrs, superman){
                            superman.addWeight();
                        }
                    }
                })
                .directive("length", function(){
                    return {
                        restrict : "A",
                        require : "superman",
                        link : function(scope, element, attrs, superman){
                            superman.addLength();
                        }
                    }
                })
                
                
    </script>
    解释: directive 中的controller放一些公共部分
           require : 通过require让多个指令共享controller中的数据
                     ^ 允许从父类开始查找 require:"^superman"
                     ? 如果找不到不抛出异常
    scope :   {} 创建独立作用域,没有原型继承

                 = or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方,这是最常用的方式;

                  @ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定,即“Isolate”作用域只能读取父作用域的值,并且该值永远的String类型

                  & or &attr “Isolate”作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性,包装方法是$parse;

    link : 主要做一些dom操作

                     
     
  • 相关阅读:
    SD卡测试
    测试人员可能会遇到的问题
    HDU 1024 Max Sum Plus Plus
    HDU 1176 免费馅饼
    HDU 1257 最少拦截系统
    HDU 1087 Super Jumping! Jumping! Jumping!
    poj 1328 Radar Installation
    poj 1753 Flip Game
    HDU 1003 Max Sum
    HDU 5592 ZYB's Premutation(BestCoder Round #65 C)
  • 原文地址:https://www.cnblogs.com/yuan001/p/4476601.html
Copyright © 2011-2022 走看看