AngularJs-指令和控制器交互

转载 2016年06月01日 23:31:23

1,指令和控制器的交互

<!DOCTYPE html>
<html ng-app="MyController">
<head>
    <meta charset="utf-8">
    <title>指令复用</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <loader>滑动加载</loader>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html> 

上面的代码平淡无奇,有个控制器有个指令(loader),下面可以看到我们通过 directive创建了这个指令,并且我们通过link的方法给他赋值鼠标事件(mouseenter)。

var myModule = angular.module('MyController',[]);
 
myModule.controller('MyCtrl',function($scope){
    $scope.loadData = function(){
        console.log("加载数据...");
    }
})
 
myModule.directive('loader',function(){
    return{
        restrict:'AE',
        link:function(scope,element,attr){
            element.bind('mouseenter',function(){
                 scope.loadData();
            })
        }
    }
}) 

我们来看看运行的结果,ok,我们打印出来 ”加载数据...“。

2,多个控制器如何公用一个指令?  我们创建指令的目的就是在于,能够复用它,当然这也是MVC的终极思想。   我们的代码也发生了一些变化

<!DOCTYPE html>
<html ng-app="MyController">
<head>
    <meta charset="utf-8">
    <title>指令复用</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <loader loadDataFn="loadData()">滑动加载</loader>
    </div>
    <div ng-controller="MyCtr2">
        <loader loadDataFn="loadData2()">滑动加载2</loader>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html> 

首先,我们创建了两个控制器 MyCtr1 和 MyCtr2,同时呢,我们给 loader 这个指令,加了一个自定义的属性叫 loadDataFn,给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2();

var myModule = angular.module('MyController',[]);
 
myModule.controller('MyCtrl',function($scope){
    $scope.loadData = function(){
        console.log("加载数据...");
    }
})
myModule.controller('MyCtr2',function($scope){
    $scope.loadData2 = function(){
        console.log("加载数据2...");
    }
})
 
myModule.directive('loader',function(){
    return{
        restrict:'AE',
        link:function(scope,element,attr){
            element.bind('mouseenter',function(){
                // scope.loadData();
                // scope.$apply("loadData()");
 
                scope.$apply(attr.loaddatafn);
            })
        }
    }
}) 

当然,在指令的 link方法中我们也做了改变,link方法呢,给我提供了四个参数:scope、element、attr和父控制器。我们给元素绑定事件也是通过参数中的 element.bind()完成的,我们也可以通过 attr 属性获取指令上的属性,然后通过$apply的方法来完成调用就好了。在此要提交大家的是,我们在获取指令元素上的属性的时候,一定要注意,我们要把属性的名字写成小写的,这是angularJS的坑。

angularjs页面传参方式

angularjs页面传参方式  1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(produce...

angularJS实战之小案例--notebook笔记本

来自《ionic实战》一书中的小案例,修改了一下,并写了详细注释。后台数据处理用的是node,为了展示效果数据存在json文件中,可暂时不看这部分。这个小案例虽然简单,但算是一个完整的案例了,前后端的...

angularjs指令详细分析&&与控制器数据交互

简介(转)指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的。指令是我们用来扩展浏览器...

angularjs中如何实现控制器和指令之间交互

如果我们具有下面的DOM结构: 滑动加载 同时我们的控制器具有如下的签名: var myModule = angular.module("MyModule", []); /...

我所理解的AngularJS指令和控制器的交互原理

AngularJS指令和控制器的交互原理 以AngularJS 指令中的‘@’来做解释。

AngularJS常见内置指令以及控制器

AngularJS常见内置指令           (1).控制指令,用于ANGULAR应用程序加载流程控制     (2).渲染指令,用于ANGULAR将数据在网页中进行展示/隐藏处理   ...

AngularJS第二课(指令,作用域,控制器)

指令实列: name: 您输入的是:{{firstName}} ng-init:作用是初始化数据 ng-model:将把输入域(也就是input)的值,绑定到应用程序(也就是{{fi...

菜鸟AngularJS学习之路 【第二天】。(事件绑定指令 循环输出 控制器嵌套)

学习Angularjs 的第二天 ,感觉进步很慢,但是要稳扎稳打不能囫囵吞枣,每个知识点都必须敲一敲才能有效果。 先来回顾今天的第一个 事件绑定指令 首先按照书上写的例子 绑定...

如何在AngularJS指令中创建controller与ngModel进行交互

正如很多文章所说的一样,指令是AngularJS的灵魂,只有真正熟练掌握了Angular 指令,才有希望成为AngularJS高手。在编写Angular指令时,我们最常用到的就是其中的link函数,它...

angularJS 自定义指令间的相互交互

angularJS 自定义指令间的相互交互angularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,tru...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJs-指令和控制器交互
举报原因:
原因补充:

(最多只允许输入30个字)