文档章节

AngularJS—— 指令的复用

孟飞阳
 孟飞阳
发布于 2016/12/11 08:55
字数 693
阅读 11
收藏 0

首先看一下一个小例子,通过自定义指令,捕获鼠标事件,并触发控制器中的方法。

  单个控制器的标签指令

  依然是先创建一个模块

var myAppModule = angular.module("myApp",[]);

  在模块的基础上,创建控制器和指令

myAppModule.controller("myAppCtrl",["$scope",function($scope){
                $scope.count = 0;
                $scope.loadData = function(){
                    $scope.count = $scope.count+1;
                    console.log("myAppCtrl load data!"+$scope.count);
                }
            }]);

            myAppModule.directive("loader",function(){
                return{
                    restrict:"AE",
                    transclude:true,
                    template:"<div><div ng-transclude></div></div>",
                    link:function(scope,element,attr){
                        element.bind("mouseenter",function(){
                            // scope.loadData();
                            scope.$apply("loadData()");
                        });
                    }
                }
            });

  首先看一下创建的控制器,在其中创建了一个loadData方法,用于相应触发事件,为了便于观察结果,添加了一个计数器。

  下面的指令采用了属性和标签元素的使用方式:“AE”,为了得到效果,创建了一个内嵌的模板(避免没有内容时,点击不到)。

  并在link属性的方法内,添加相应事件,方法中有三个参数:

  1 scope,作用域,用于调用相应的作用域的方法。

  2 element,指代创建的标签

  3 attr,用于扩展属性,稍后展示使用方法

  有了以上的准备工作,就可以在body里面使用标签了:

<div ng-controller="myAppCtrl">
            <loader howToLoad="loadData()">第一个loader!</loader>
        </div>

  

  如何复用指令

  以上仅仅是单个控制器的指令使用,一个指令在一个页面中可以被多次使用,也就意味着,会有多个控制器使用该指令。

  那么指令如何知道调用控制器的那个方法呢?这就用到了attr属性。

  在创建指令时,调用attr获取属性的值

myAppModule.directive("loader",function(){
                return{
                    restrict:"AE",
                    transclude:true,
                    template:"<div><div ng-transclude></div></div>",
                    link:function(scope,element,attr){
                        element.bind("mouseenter",function(){
                            // scope.loadData();
                            // scope.$apply("loadData()");
                            scope.$apply(attr.howtoload);
                        });
                    }
                }
            });

  就可以在body中按照如下的方式使用了:

<div ng-controller="myAppCtrl">
            <loader howToLoad="loadData()">第一个loader!</loader>
        </div>
        <div ng-controller="myAppCtrl2">
            <loader howToLoad="loadData2()">第二个loader!</loader>
        </div>

  需要注意的是:

  1 标签中属性使用驼峰法命名,在指令中要转换成全部小写。

  2 指令中调用的仅仅是属性的名字,没有方法括号。

  3 应用时,属性对应的值是该控制器内声明的执行方法。

  

  下面看一下样例代码:

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="myAppCtrl">
            <loader howToLoad="loadData()">第一个loader!</loader>
        </div>
        <div ng-controller="myAppCtrl2">
            <loader howToLoad="loadData2()">第二个loader!</loader>
        </div>
        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller("myAppCtrl",["$scope",function($scope){
                $scope.count = 0;
                $scope.loadData = function(){
                    $scope.count = $scope.count+1;
                    console.log("myAppCtrl load data!"+$scope.count);
                }
            }]);
            myAppModule.controller("myAppCtrl2",["$scope",function($scope){
                $scope.count = 0;
                $scope.loadData2 = function(){
                    $scope.count = $scope.count+1;
                    console.log("myAppCtrl2 load data!"+$scope.count);
                }
            }]);

            myAppModule.directive("loader",function(){
                return{
                    restrict:"AE",
                    transclude:true,
                    template:"<div><div ng-transclude></div></div>",
                    link:function(scope,element,attr){
                        element.bind("mouseenter",function(){
                            // scope.loadData();
                            // scope.$apply("loadData()");
                            scope.$apply(attr.howtoload);
                        });
                    }
                }
            });
        </script>
    </body>
</html>

  实现的结果:

本文转载自:http://www.cnblogs.com/xing901022/p/4290276.html

共有 人打赏支持
孟飞阳
粉丝 206
博文 964
码字总数 543203
作品 5
朝阳
个人站长
私信 提问
【前端】Angular组件钩子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/82259409 Angular中的钩子方法,是非常常用的知识点,也在项目代码运用中有所体...

冯浩月
08/31
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
【前端】—聊聊我认识的Angular

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

zt15732625878
05/19
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
JavaScript MVW 框架 - AngularJS

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

匿名
2011/01/20
0
44

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 程序员左轮轮盘赌注

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bon Jovi的单曲《You Give Love a Bad Name》 《You Give Love a Bad Name》- Bon Jovi 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
16分钟前
161
8
oracle 用户密码过期-ORA-28001: 口令已经失效

oracle 用户密码过期-ORA-28001: 口令已经失效 操作步骤: [BEGIN] 2018-10-23 17:25:43Last login: Mon Sep 3 08:46:32 2018 from 10.2.202.12#登陆数据库#(1)在命令窗口中输入:...

诺岚
20分钟前
1
0
[转载]Yarn作业提交流程

1、yarn简述 yarn是一个资源调度平台,负责为运算程序提供服务器运算资源,相当于一个分布式操作系统平台,而mapreduce等运算程序则相当于运行与操作系统之上的应用程序。yarn在hadoop2.x系列...

hnairdb
24分钟前
0
0
WebSocketdemo

WebSocket是html5提供的一种在单个tcp连接上进行全双工通讯的协议。 Http协议是无状态、无连接的、单向的应用层协议,采用了请求响应模型,通信请求智能有客户端发起,服务端对请求做出应答处...

qiang123
30分钟前
0
0
谷歌推迟公布Google+漏洞遭参议员不满

参议院商务委员会主席约翰·图恩和另外两位参议员杰瑞·莫兰和罗杰·维克发出信函,要求谷歌解释推迟披露此问题的原因。信中称:“谷歌如果要保持或重获用户对其服务的信任,就必须在公众和立...

linuxCool
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部