angularJs在多个控制器中共享服务数据的方法


Posted in Javascript onSeptember 30, 2018

如下所示:

<div ng-app="module">
 <div ng-controller="ctrl1">
  <table border="1" width="600">
   <tr>
    <td>网站名称</td>
    <td>网址</td>
   </tr>
   <tr ng-repeat="v in data.webs">
    <td>{{v.name}}</td>
    <td>{{v.url}}</td>
   </tr>
  </table>
 </div>
 <hr>
 <div ng-controller="ctrl2">
  <table border="1" width="600">
   <tr>
    <td>网站名称</td>
    <td>网址</td>
   </tr>
   <tr ng-repeat="v in data.webs">
    <td>{{v.name}}</td>
    <td>{{v.url}}</td>
   </tr>
  </table>
  <h1>{{web.name}}</h1>
  <button ng-click="removeAll()">删除所有数据</button>
 </div>
</div>
<script>
 var m = angular.module('module', []);
 //定义服务
 m.factory('videoServer', ['$http', function ($http) {
  var obj = {
   data: {webs:[]},
   //所有数据
   all: function () {
    return $http({url: '1.php'}).then(function (response) {
     obj.data.webs = response.data;
     return obj.data;
    });
   },
   //获取一条数据
   find: function (id) {
    return this.all().then(function (data) {
     for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
       return data[i];
      }
     }
    });
   },
   //删除所有数据
   flush: function () {
    obj.data.webs=[];
   }
  };
  return obj;
 }]);
 //控制器ctrl1
 m.controller('ctrl1', ['$scope', 'videoServer', function ($scope, videoServer) {
  videoServer.all().then(function (data) {
   $scope.data = data;
  });
 }]);

  //控制器ctrl2
 m.controller('ctrl2', ['$scope', 'videoServer', function ($scope, videoServer) {
  videoServer.all().then(function (data) {
   $scope.data = data;
  });
  videoServer.find(1).then(function (data) {
   $scope.web = data;
  })
  $scope.removeAll=function(){
   videoServer.flush();
  }
 }]);
</script>

1.php

<?php
$data = [
 [ 'name' => '百度', 'url' => 'www.baidu.com' ],
 [ 'name' => '谷歌', 'url' => 'google.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);

以上这篇angularJs在多个控制器中共享服务数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript demo 基本技巧
Dec 18 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
You might like
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
为你总结一些php信息函数
2015/10/21 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python交互环境下实现输入代码
2018/06/22 Python
python scipy卷积运算的实现方法
2019/09/16 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
ORACLE十问
2015/04/20 面试题
《囚绿记》教学反思
2014/03/01 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL