angularjs中如何实现控制器和指令之间交互的实例代码-js教程-PHP中文网

首页

web前端

js教程

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

黄舟

Jun 01, 2017 am 09:34 AM

本篇文章主要介绍了详解angular js中如何实现控制器和指令之间交互，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

如果我们具有下面的DOM结构：

  <p ng-controller="MyCtrl"> 
   <loader>滑动加载</loader> 
</p>

登录后复制

同时我们的控制器具有如下的签名：

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]);

登录后复制

同时指令的签名如下：

myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind(&#39;mouseenter&#39;, function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
      }); 
    } 
  }  
});

登录后复制

这时候我们的指令通过scope.loadData或者scope.$apply就可以完成对控制器的调用了。但是如果我们具有两个控制器呢?而且两个控制器中$scope中方法是不同的?

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]);

登录后复制

这时候在我们的指令中如何调用方法呢，按照上面的方式的话那么那么就会面临问题：MyCtrl2没有我们的loadData，而只有loadData2!这时候我们就需要使用后面的指令自定义属性了!

我们定义了两个controller控制器，分别为MyCtrl,MyCtrl2,这两个控制器都使用了我们自己定义的指令load:

<!doctype html> 
<html ng-app="MyModule"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
  <body> 
  <!--第一个控制器MyCtrl--> 
    <p ng-controller="MyCtrl"> 
      <loader howToLoad="loadData()">滑动加载</loader> 
    </p> 
    <!--第二个控制器MyCtrl2--> 
    <p ng-controller="MyCtrl2"> 
      <loader howToLoad="loadData2()">滑动加载</loader> 
    </p> 
  </body> 
  <script src="framework/angular-1.3.0.14/angular.js"></script> 
  <script src="Directive&Controller.js"></script> 
</html>

登录后复制

我们自定义了Controller代码如下：

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器，第二个参数为一个数组，其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller(&#39;MyCtrl&#39;, [&#39;$scope&#39;, function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]); 
//在模块下挂载一个loader指令 
myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑，howToLoad会被转换成小写的howtoload 
        // scope.$apply(attrs.howtoload); 
        //其中scope为POJO，但是有一系列的工具方法如$watch,$apply等 
      }); 
    } 
  }  
});

登录后复制

很显然这里有两个控制器，分别为MyCtrl和MyCtrl2，我们的指令如何知道调用那一个Controller?这时候我们就需要为我们的指令指定不同的属性，用这个属性来判断不同的controller调用，这样我们的指令就可以在不同的controller中调用了!

总结：之所以定义指令就是为了复用，为了让指令和不同的控制器进行交互就会为指令定义不同的配置项，这就是指令和控制器进行数据交互的原理之所在!

以上是angularjs中如何实现控制器和指令之间交互的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7467

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Windows 11 上正确校准 Xbox One 控制器的方法 Sep 21, 2023 pm 09:09 PM

由于Windows已成为首选的游戏平台，因此确定其面向游戏的功能就显得尤为重要。其中之一是能够在Windows11上校准XboxOne控制器。借助内置的手动校准，您可以摆脱漂移、随机移动或性能问题，并有效地对齐X、Y和Z轴。如果可用选项不起作用，您可以随时使用第三方XboxOne控制器校准工具。让我们来了解一下！如何在Windows11上校准我的Xbox控制器？在继续操作之前，请确保将控制器连接到电脑并更新XboxOne控制器的驱动程序。当您使用它时，还要安装任何可用的固件更新。1.使用Wind

泰拉瑞亚怎么用指令获得物品？-泰拉瑞亚怎么收藏物品? Mar 19, 2024 am 08:13 AM

泰拉瑞亚怎么用指令获得物品？一、什么是泰拉瑞亚给予物品指令在泰拉瑞亚游戏中，给予物品指令是一项非常实用的功能。通过这个指令，玩家可以直接获取需要的物品，而不必费力地去打怪或者传送到某个地点。这样可以极大地节省时间，提高游戏的效率，让玩家更专注于探索和建设世界。总的来说，这个功能让游戏体验变得更加流畅和愉快。二、如何使用泰拉瑞亚给予物品指令1.打开游戏并进入游戏界面。2.按下键盘上的“Enter”键，打开聊天窗口。3.在聊天窗口中输入指令的格式：“/give[玩家名称][物品ID][物品数量]”。

VUE3快速入门：使用Vue.js指令实现选项卡切换 Jun 15, 2023 pm 11:45 PM

本文旨在帮助初学者快速入手Vue.js3，实现简单的选项卡切换效果。Vue.js是一个流行的JavaScript框架，可用于构建可重用的组件、轻松管理应用程序的状态和处理用户界面的交互操作。Vue.js3是该框架的最新版本，相较于之前的版本变动较大，但基本原理并未改变。在本文中，我们将使用Vue.js指令实现选项卡切换效果，目的是让读者熟悉Vue.js的

从零开始学习Laravel：控制器方法调用详解 Mar 10, 2024 pm 05:03 PM

从零开始学习Laravel：控制器方法调用详解在Laravel的开发中，控制器是一个非常重要的概念。控制器起到了连接模型和视图的桥梁作用，负责处理来自路由的请求，并返回相应的数据给视图展示。控制器中的方法可以被路由调用，这篇文章将详细介绍如何编写并调用控制器中的方法，同时会提供具体的代码示例。首先，我们需要创建一个控制器。可以使用Artisan命令行工具来生

php如何使用CodeIgniter4框架？ May 31, 2023 pm 02:51 PM

PHP是一种非常流行的编程语言，而CodeIgniter4是一种常用的PHP框架。在开发Web应用程序时，使用框架是非常有帮助的，它可以加速开发过程、提高代码质量、降低维护成本。本文将介绍如何使用CodeIgniter4框架。安装CodeIgniter4框架CodeIgniter4框架可以从官方网站（https://codeigniter.com/）下载。下

什么叫laravel控制器 Jan 14, 2023 am 11:16 AM

在laravel中，控制器（Controller）是一个类，用于实现一定的功能；控制器能将相关的请求处理逻辑组成一个单独的类。控制器中存放中一些方法，实现一定的功能，通过路由调用控制器，不再使用回调函数；控制器被存放在“app/Http/Controllers”目录中。

Laravel学习指南：控制器方法调用的最佳实践 Mar 11, 2024 am 08:27 AM

在Laravel学习指南中，控制器方法的调用是一个非常重要的主题。控制器扮演着连接路由和模型的桥梁的角色，在应用程序中起着至关重要的作用。本文将介绍控制器方法调用的最佳实践，并提供具体的代码示例帮助读者更好地理解。首先，让我们来了解控制器方法的基本结构。在Laravel中，控制器类通常存放在app/Http/Controllers目录下，每个控制器类包含多个

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题