详解AngularJS controller调用factory


Posted in Javascript onMay 19, 2017

1、定义 factory.js 文件

var appFactorys = angular.module('starter.factorys', []) 
appFactorys.factory('HouseFactory', function () { 
  var houseList = [ 
    { id: 0, title: '急售北二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/ben.png' }, 
    { id: 1, title: '急售东二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/max.png' }, 
    { id: 2, title: '急售南二环 小区配套齐全 精装修', price: '87.0', describe: '2室1厅 120平米', img: 'img/adam.jpg' }, 
    { id: 3, title: '急售西二环 小区配套齐全 精装修', price: '86.0', describe: '2室1厅 120平米', img: 'img/perry.png' }, 
    { id: 4, title: '急售北二环 小区配套齐全 精装修', price: '85.0', describe: '2室1厅 120平米', img: 'img/mike.png' } 
  ]; 
  return { 
      all: function () { 
        return houseList; 
      }, 
    }; 
});

2、在 app.js 文件引用 factory.js 文件

angular.module('starter', ['ionic', 'ngCordova', 'starter.directives','starter.factorys','starter.services', 'starter.customControllers']) 

3、在controller中调用factory

appControllers.controller('HouseCtrl', function ($scope, $timeout, $ionicModal, $ionicActionSheet, $http, $cordovaToast, $ionicLoading, HouseFactory) { 
  // $scope.houseList = [ 
  //   { id: 0, title: '急售北二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/ben.png' }, 
  //   { id: 1, title: '急售东二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/max.png' }, 
  //   { id: 2, title: '急售南二环 小区配套齐全 精装修', price: '87.0', describe: '2室1厅 120平米', img: 'img/adam.jpg' }, 
  //   { id: 3, title: '急售西二环 小区配套齐全 精装修', price: '86.0', describe: '2室1厅 120平米', img: 'img/perry.png' }, 
  //   { id: 4, title: '急售北二环 小区配套齐全 精装修', price: '85.0', describe: '2室1厅 120平米', img: 'img/mike.png' } 
  // ]; 
 
  /* 调用Factory.js数据 */ 
  $scope.houseList = HouseFactory.all(); 
 
})

4、html页面调用

<ion-list> 
  <ion-item class="item item-thumbnail-left" ng-repeat="item in houseList" href="#/housedetail/{{item.id}}" rel="external nofollow" style="padding--bottom:2px"> 
    <img ng-src="{{item.img}}"> 
    <h2>{{item.title}}</h2> 
    <dd class="assertive cus-price">{{item.price}}万元</dd> 
    <dd class="u-f-h4">{{item.describe}}</dd> 
  </ion-item> 
</ion-list>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
13个PHP函数超实用
Oct 21 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
layui弹出层效果实现代码
May 19 #Javascript
layui分页效果实现代码
May 19 #Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
详解Node.js开发中的express-session
May 19 #Javascript
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
php curl发送请求实例方法
2019/08/01 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python实现代码块儿折叠
2020/04/15 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
python3排序的实例方法
2020/10/20 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
应届毕业生个人求职自荐信
2014/01/06 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
迎元旦广播稿
2014/02/22 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
党员干部学习心得体会
2016/01/23 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL