Example code for how to implement interaction between controllers and instructions in angularjs-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Example code for how to implement interaction between controllers and instructions in angularjs

黄舟

Jun 01, 2017 am 09:34 AM

This article mainly introduces the detailed explanation of how to implement the interaction between controller and instructions in angular js. It has certain reference value. If you are interested Friends, you can refer to

If we have the following DOM structure:

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

At the same time, our controller has the following signature:

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

At the same time, the signature of the instruction is as follows:

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 
      }); 
    } 
  }  
});

At this time, our instructions can complete the call to the controller through scope.loadData or scope.$apply. But what if we have two controllers? And the methods in $scope are different in the two controllers?

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"); 
  } 
}]);

How to call the method in our instructions at this time, according to the above method, then You will face a problem: MyCtrl2 does not have our loadData, but only loadData2! At this time we need to use the following instructions to customize the attributes!

We have defined two controller controllers, They are MyCtrl and MyCtrl2 respectively. Both controllers use our own defined instructions 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>

We customized the Controller code as follows:

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等 
      }); 
    } 
  }  
});

Obviously there are two controls here The controllers are MyCtrl and MyCtrl2 respectively. How does our instruction know which Controller to call? At this time, we need to specify different attributes for our instructions. Use this attribute to judge different controller calls, so that our instructions can be called in different is called in the controller!

Summary: The reason why instructions are defined is for reuse. In order to allow instructions to interact with different controllers, different configuration items will be defined for instructions. This is the purpose of instructions and The principle of data interaction between controllers!

The above is the detailed content of Example code for how to implement interaction between controllers and instructions in angularjs. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

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

从零开始学习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 高级框架设计视频教程》就对了。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

在Yii框架中使用控制器（Controllers）处理Ajax请求的方法Jul 28, 2023 pm 07:37 PM

在Yii框架中，控制器（Controllers）扮演着处理请求的重要角色。除了处理常规的页面请求之外，控制器还可以用于处理Ajax请求。本文将介绍在Yii框架中处理Ajax请求的方法，并提供代码示例。在Yii框架中，处理Ajax请求可以通过以下步骤进行：第一步，创建一个控制器（Controller）类。可以通过继承Yii框架提供的基础控制器类yiiwebCo

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

1 months agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

1 months agoByDDD

R.E.P.O. Best Graphic Settings

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

1 weeks agoByDDD

Hot Tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),