文档章节

AngularJs自定义指令大全

天蓬小猪
 天蓬小猪
发布于 2015/12/16 00:01
字数 532
阅读 186
收藏 4
点赞 0
评论 0
<!DOCTYPE html>
<html ng-app="myModule">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <hello><div>this is transclude </div></hello>
    <h1>自定义指令同controller交互</h1>
    <div ng-controller="myCtrl">
        <loader>加载数据</loader>
    </div>
    <h1>自定义指令通过属性进行调用</h1>
    <div ng-controller="myCtrl1">
        <loader1 howtoload="loadata1()">加载数据1</loader1>
    </div>
    <div ng-controller="myCtrl2">
        <loader1 howtoload="loadata2()">加载数据2</loader1>
    </div>

    <h1>指令之间的操作</h1>
    <superman>动感超人什么都没有</superman><br>
    <superman light>动感超人 有光</superman>
    <br/>
    <superman light speed>动感超人 有光 有速度</superman>
    <br/>
    <superman light speed strength>动感超人 有光 有速度 有力量</superman>
    <br/>
    <h1>scope绑定策略</h1>
    <ul>
        <li>@ 传递字符串</li>
        <li>= 与父作用域进行双向绑定的</li>
        <li>& 调用父作用域的函数方法</li>
    </ul>
    <div ng-controller="drinkCtrl">
        <drink flavor="{{flavor}}"></drink>
        <hr/>
        CTRL:
        <input type="text" ng-model="flavor"/><br/>
        dirctive:
        <drink1 flavor="flavor"></drink1>
    </div>
    <hr/>
    <div ng-controller="greetingCtrl">
        <greeting greet="sayhello(name)"></greeting>
    </div>
</div>
<script src="../../lib/angularjs/angular.min.js"></script>
<script>
    var myModule = angular.module("myModule",[]);

    /**
     * myModule.run(function($templateCache){
     *
     *      $templateCache.put("hello.html","<div>hello everyOne</div>")
     * }
     * )
     */
    //myModule.directive("hello",function($templateCache){
    myModule.directive("hello",function(){
        return {
            restrict:"AEMC",
            template:"<div>Hi EveryOne!<div ng-transclude=''></div></div>",
            //transclude:true,
            //templateUrl:"hello.html",
            //template:$templateCache.get("hello.html"),
            //replace:true
            transclude:true
        }
    });
    myModule.controller("myCtrl",function($scope){
        $scope.loadata = function(){
            console.log("load data");
        }
    });
    myModule.controller("myCtrl1",function($scope){
        $scope.loadata1 = function(){
            console.log("load data1");
        }
    });
    myModule.controller("myCtrl2",function($scope){
        $scope.loadata2 = function(){
            console.log("load data2");
        }
    });
    myModule.directive("loader",function(){
        return {
            restrict:"AE",
            link:function(scope,element,attr){
                element.bind("mouseenter",function(){
//                   scope.loadata1();
                    scope.$apply("loadata()");
                });
            }
        }
    });
    myModule.directive("loader1",function(){
        return{
            restrict:"E",
            link:function(scope,element,attr){
                element.bind("mouseenter",function(){
//                    scope.loadata1();
//                    console.log("test...");
                    scope.$apply(attr.howtoload);
                });
            }
        }
    });
    myModule.directive("superman",function(){
        return {
            scope:{},//指定独立作用域
            restrict:"E",
            controller:function($scope){
                $scope.abilities=[];
                this.addStrength=function(){
                    $scope.abilities.push("strength");
                };
                this.addSpeed = function(){
                    $scope.abilities.push("speed");
                };
                this.addLight = function(){
                    $scope.abilities.push("Light");
                }
            },
            link:function(scope,element,attr){
                element.bind("mouseenter",function(){
                    console.log(scope.abilities);
                });
            }
        }
    });
    myModule.directive("strength",function(){
        return{
            require:"^superman",
            link:function(scope,element,attr,supermanCtrl){
                supermanCtrl.addStrength();
            }
        }
    });
    myModule.directive("speed",function(){
        return{
            require:"^superman",
            link:function(scope,element,attr,supermanCtrl){
                supermanCtrl.addSpeed()
            }
        }
    });
    myModule.directive("light",function(){
        return{
            require:"^superman",
            link:function(scope,element,attr,supermanCtrl){
                supermanCtrl.addLight();
            }
        }
    });
    myModule.controller("drinkCtrl",function($scope){
        $scope.flavor="baiwei + liquan";
    })
    myModule.directive("drink",function(){
        return{
            restrict:"AE",
            template:"<div>{{flavor}}</div>",
            scope:{
                flavor:"@"//传递字符串对象
            }
//            link:function(scope,element,attr){
//                scope.flavor = attr.flavor;
//            }
        }
    })
    myModule.directive("drink1",function(){
        return{
            restrict:"AE",
            template:"<input type='text' ng-model='flavor'>",
            scope:{
                flavor:"="//与父对象进行双向绑定
            }
//            link:function(scope,element,attr){
//                scope.flavor = attr.flavor;
//            }
        }
    });
    myModule.controller("greetingCtrl",function($scope){
        $scope.sayhello=function(name){
            alert("Hello "+ name);
        }
    });
    myModule.directive("greeting",function(){
        return {
            restrict:"AE",
            scope:{
                greet:"&"
            },
            template:"<input type='text' ng-model='userName'><br/>"+
                    "<button ng-click='greet({name:userName})'>测试{{userName}}</button>"
        }
    });
</script>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
天蓬小猪

天蓬小猪

粉丝 505
博文 41
码字总数 41879
作品 1
深圳
后端工程师
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

源码分析 @angular/cdk 之 Portal

Portal 是什么 最近在学习 React 时,发现 React 提供了 Portals 技术,该技术主要用来把子节点动态的显示到父节点外的 DOM 节点上,该技术的一个经典用例应该就是 Dialog 了。设想一下在设计...

lx1036 ⋅ 05/29 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

[NGX]使用ViewContainerRef来操作Angular中的DOM

https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02 原文链接,墙裂推荐阅读原文,事实上这篇文章网上已有的翻译都有或多或少的错误,我这篇肯定也不例外。 ...

我爱吃南瓜 ⋅ 05/11 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

x64: TITLE Add and Subtract (AddSub.asm) ; This program adds and subtracts 32-bit integers. ; Last update: 2/1/02 ;.MODEL flat,stdcall x64 not su......

simpower ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 昨天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 昨天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 昨天 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 昨天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 昨天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部