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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
jquery实现submit提交表单
Feb 03 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
ES6数组的扩展详解
Apr 25 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python中安装easy_install的方法
2018/11/18 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python实现可逆简单的加密算法
2019/03/22 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
思想政治自我鉴定
2013/10/06 职场文书
疾病捐款倡议书
2014/05/13 职场文书
企业文明单位申报材料
2014/05/16 职场文书
锦旗标语大全
2014/06/23 职场文书
师范毕业生求职信
2014/07/11 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书