文档章节

AngularJs自定义指令大全

天蓬小猪
 天蓬小猪
发布于 2015/12/16 00:01
字数 532
阅读 242
收藏 4

行业解决方案、产品招募中!想赚钱就来传!>>>

<!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>

上一篇: 占位
天蓬小猪

天蓬小猪

粉丝 516
博文 43
码字总数 41879
作品 1
深圳
后端工程师
私信 提问
加载中
请先登录后再评论。
自定义表单系统--FormDesign

是基于 FLEX 开发的一款B/S的自定义表单系统 整个过程如下: 1、通过FormDesign自定义表单画出相应的表单; 2、将生成好的XML放到程序中,并通过后台自动编译成JSP; 注:FormDesing只是自定...

polliwog
2013/03/29
1.6W
1
静态博客网站生成器--Hexo

Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen 特点: 不可思议的快速 ─ 只要一眨眼静态文件即生成完成 支持 Markdown 仅需一道指令即可部署到 GitHub Pages 和...

匿名
2013/04/05
2.8W
4
AngularJS 的UI增强指令集--AngularUI

Angular UI 顾名思义,AngularJS 的UI增强指令集,提供了IE、jQuery 兼容,以及一些常用 UI 组件。 包含的模块有: UI-Utils UI-Modules UI-Alias UI-Bootstrap NG-Grid UI-Router IDE Plug...

匿名
2012/12/24
4.2W
0
RSS 阅读器--CommaFeed

CommaFeed 是 Google Reader 的开源实现,使用 Java ,基于 AX-RS, Wicket 和 AngularJS 开发。 直接发布到 OpenShift 平台的步骤: Create an account on OpenShift. Add an application, ......

匿名
2013/05/17
1W
8
PS快捷键大全

一、工具箱(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取) 矩形、椭圆选框工具 【M】 移动工具 【V】 套索、多边形套索、磁性套索 【L】 魔棒工具 【W】 裁剪工具 【C】 切片工...

麻新鑫
2012/10/26
127
1

没有更多内容

加载失败,请刷新页面

加载更多

鼠年吉祥,新年快乐

今天是大年初一,很高兴在过去一年中有您的陪伴,希望大家在新的一年中平安健康,一切顺利,加油。 邓飞 202001250539 于后园爷爷家 本文分享自微信公众号 - 育种数据分析之放飞自我(R-bre...

育种数据分析之放飞自
01/25
0
0
不烧脑、不耗时、全免费,带你0基础学Python

文末有福利 Python是人工智能的未来。 最近,电气和电子工程师协会( IEEE)发布了顶级编程语言交互排行榜:Python高居首位。 而且随着大数据和人工智能的发展,Python受到了越来越多程序员的...

kunjian
今天
11
0
R语言入门系列之一

写在前面 计算机语言的学习并不困难,关键是一定要由浅入深的实际操作练习。也许最开始的比较简单,学习者一带而过没有实际操作,之后的进一步学习很可能会陷入不知所云的困境,实际操作所带...

SYSU星空
2019/02/17
0
0
Istio-本地运行

概述 基于上一篇 Istio1.6-二进制编译和本地运行 但集中在 pilot-discovery 和 envoy(pilot-agent 大部分功能仅作为 envoy 的 watchdog,略过) NOTE: 以下的描述,相对路径都基于目录 /g...

深蓝苹果
50分钟前
9
0
基于Linux、C、JSON、Socket的编程实例(附代码)

点击上方「嵌入式大杂烩」,选择「置顶公众号」第一时间阅读编程笔记! 一、前言 之前在学习socket编程的时候有分享一个基于控制台的简易天气客户端的实现,当时提供的是window下的代码,最近...

学以解忧
2019/10/29
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部