文档章节

AngularJs自定义指令大全

天蓬小猪
 天蓬小猪
发布于 2015/12/16 00:01
字数 532
阅读 193
收藏 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>

© 著作权归作者所有

共有 人打赏支持
上一篇: 占位
天蓬小猪

天蓬小猪

粉丝 511
博文 43
码字总数 41879
作品 1
深圳
后端工程师
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
开源中国的 AngularJS 优秀文章汇总

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

oschina
2014/08/24
5.7K
13
【前端】—聊聊我认识的Angular

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

zt15732625878
05/19
0
0
OSChina 技术专题之 AngularJS 更新版(201412)

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

OSC编辑部
2014/10/17
11.1K
26
AngularJS 的自定义指令

这是一篇angularjs自定义指令的教程。就让我们来看看,如何在angularjs中自定义指令吧!我们将利用现有的guitar angularjs app,这在 教程14: AngularJ表单验证 中用到过。你可以在这里下载 ...

oschina
2014/07/28
13.5K
2

没有更多内容

加载失败,请刷新页面

加载更多

RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
12
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
9
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
8
0
在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部