AngulatJS多个控制器内数据共享

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量58 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/516843
版权

     利用factory和service方法定义服务，通过两个控制器利用同一个服务达到控制器间数据共享的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html >
 
< head >
     < meta  charset = "utf-8" >
</ head >
 
< body  ng-app = "app" >
     < div  ng-controller = "Controller1" >
         < input  type = "text"  ng-model = "value1.message" >
         < p >first:< span  ng-bind = "value1.message" ></ span ></ p >
     </ div >
     < div  ng-controller = "Controller2" >
         < p >second:< span  ng-bind = "value2.message" ></ span ></ p >
     </ div >
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js" ></ script >
     < script  type = "text/javascript" >
     angular.module('app', [])
         .factory('Data', function() {
             return {
                 message: ''
             };
         })
         .controller('Controller1', function($scope, Data) {
             $scope.value1 = Data;
         })
         .controller('Controller2', function($scope, Data) {
             $scope.value2 = Data;
         });
     </ script >
</ body >
 
</ html >

      这里使用的是factory方法，定义了名为Data的服务，这个服务就是连接两个controller的桥梁。










本文转自 iampomelo 51CTO博客，原文链接：http://blog.51cto.com/iampomelo/1666896，如需转载请自行联系原作者
weixin_33937778
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多个控制器的数据共享的两种方法
qq_44858021的博客
06-13 484
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angul...
程序员面试刷题的书哪个好-AngularJS-Interview-Q-A:有一个即将到来的AngularJS面试或刚刚学习AngularJS，
07-07
AngulatJS 过滤器进行单元测试的基本步骤是什么？ 回答： 注入包含过滤器的模块。 提供过滤器依赖的任何模拟。 使用 $filter('yourFilterName') 获取过滤器的实例。 断言你的期望。 依赖注入是一种强大的软件设计...
多个控制器内数据共享
weixin_30256901的博客
09-07 105
<!DOCTYPE html><html><head> <meta charset="utf-8"></head><body><div ng-app="myApp"> <div ng-controller="firstController"> first.data<inp...
多个控制器共享数据
weixin_30325071的博客
05-16 60
这种方法不推荐，应该使用服务来共享数据 转载于:https://www.cnblogs.com/toward-the-sun/p/4507879.html
AngulatJS Controller
weixin_30810583的博客
04-21 49
<!DOCTYPE html> <html ng-app="demo"> <head> <title></title> </head> <body> <input type="text" ng-model="data.message" /> <h1&g...
AngulatJS $directive
weixin_30896511的博客
04-19 48
$directive()方法包含2个参数 1 name 视图中的元素 2 function 决定directive怎样的作用，返回一个object restrict : E/A/C/M 绑定元素的类型 E element A attribute C class M comment priority:如果同一个元素绑定2个directive，那么可以在这里设置优先级 terminal...
AngulatJS $directive compile
weixin_30628077的博客
04-23 49
<!DOCTYPE html> <html> <head> <title></title> <script src="angular.min.js"type="text/javascript"></script> </head> <body ng-app="demo...
AngularJs定时器$interval 和 $timeout详解
10-19
主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
日期控件.doc
08-02
这是一个关于日期控件的源码的提取，因为无法与angularJs兼容使用，只能查看其源码，实现前后端绑定
airline-reservation:使用角度创建机票预订系统
05-19
它对前端使用angulatJS，对后端使用nodejs，对数据库使用mongoDB。 为了加快开发时间，使用了Bootstrap-CSS。 这是一个模拟应用程序，旨在探索AngularJS，nodeJS和mongoDB的功能。设置要设置应用， 在您的系统上...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 799
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1126
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 587
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1096
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 410
【代码】博客前端项目学习day03——框架页。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 613
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
angulatjs开发中怎么获取经纬度
04-11
代码示例： if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log("Geolocation is not supported by this browser."); } ...function showPosition...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值