Angular 控制器之间的通信

一时失言乱红尘 2022-06-06 00:59 167阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app ='App'>
    <head>
    	<meta charset="UTF-8">
    	<title>angular控制器通信</title>
    </head>
    <style>
    	
    </style>
    <body>
    	<div ng-controller='Ctrl1'>  
         	<input type="text" ng-model="test" />  <br>
         	<button ng-click="change()">输入内容后  第一步先点我</button>  
    	</div>  
    	<div ng-controller='Ctrl2'>  
    		<button ng-click="add()">第二部点我</button>  
    		<h2>控制器通信的值为： {
       {name}}</h2>
    	</div>  
    </body>
    </html>
    <script src="./src/angular.min.js"></script>
    <script type="text/javascript">
    
    	var app = angular.module('App',[]);
    	//工厂模式  也可以用 service 可以理解成中间变量
    	app.factory('Myfactory', function(){  
    	    return {};  
    	});  
    	app.controller('Ctrl1',['$scope','Myfactory',function($scope,Myfactory){
    	 	$scope.change = function() {  
    	       Myfactory.name = $scope.test;   //在第一个控制器中为服务对象赋值  
    	  	};  
    	}]);
    	app.controller('Ctrl2',['$scope','Myfactory',function($scope,Myfactory){
    	  	$scope.add = function() {  
    	       $scope.name = Myfactory.name; //将第一个控制器中为服务对象赋的值传给第二个控制器  
    	  	};  
    	 }]);
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关【Angular知识点】通过服务实现组件之间的通信EventEmitter

场景：界面是由多个组件组成的，如果组件A中修改了数据内容，其他组件（与组件A中的数据有关联的）需要相应修改，那么就需要用到EventEmitter。第一步：创建服务文件：e

末蓝、/ 2024年02月19日 12:32/ 0 赞/ 44 阅读

相关 angular中控制器之间的传值该怎么实现?

作者：机智的布鲁斯链接：https://www.zhihu.com/question/34977234/answer/60731328 来源：知乎著作权归作者所

野性酷女/ 2022年08月23日 00:41/ 0 赞/ 161 阅读

相关 Fragment之间的通信

在本节中，你会学到 1、定义接口 2、实现接口 3、将消息传递给fragment 为了重用Fragment UI 组件，在设计中你应该通过定义每一个fragemnt自己

淡淡的烟草味﹌/ 2022年08月11日 16:38/ 0 赞/ 190 阅读

相关 Fragment之间的通信

在本节中，你会学到 1、定义接口 2、实现接口 3、将消息传递给fragment 为了重用Fragment UI组件，在设计中你应该通过定义每一个fragemnt自己的

喜欢ヅ旅行/ 2022年08月09日 09:24/ 0 赞/ 212 阅读

相关 tabbar视图控制器之间的切换

// // AppDelegate.m // tabbar // // Created by Wei Zheng on 17/8/8. // Copyrigh

旧城等待，/ 2022年06月09日 13:58/ 0 赞/ 170 阅读

相关 Angular 控制器之间的通信

<!DOCTYPE html> <html lang="en" ng-app ='App'> <head> <meta charset="UT

一时失言乱红尘/ 2022年06月06日 00:59/ 0 赞/ 168 阅读

相关 angular 控制器之间的通信

1, 利用作用域的继承方式由于作用域的继承是基于js的原型继承方式，所以这里分为两种情况，当作用域上面的值为基本类型的时候，修改父作用域上面的值会影响到子作用域，反之，修

川长思鸟来/ 2022年06月05日 01:07/ 0 赞/ 199 阅读

相关 angular 父子通信

xiaotou.component.ts import { Component,OnInit } from '@angular/core'; import {

港控/mmm°/ 2022年06月01日 04:24/ 0 赞/ 209 阅读

相关进程之间的通信

进程之间的通信: 进程是指运行中的程序，进程的任务就是执行程序中的代码，如下面程序EchoPlayer类是一个独立的java程序，他可以在任意一条安装了JDK的主机上

青旅半醒/ 2021年09月15日 08:00/ 0 赞/ 516 阅读

相关 angular中子控制器向父控制器传值

angular中子控制器向父控制器传值 ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] 子级指令app-sheet中，使

ゝ一世哀愁。/ 2021年09月11日 07:44/ 0 赞/ 362 阅读