详解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 相关文章推荐
农历与西历对照
Sep 06 Javascript
5 cool javascript apps
Mar 24 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
如何制作自己的原生JavaScript路由
May 05 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
聊天室php&amp;mysql(四)
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
创建Django项目图文实例详解
2019/06/06 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
Java基础之线程锁相关知识总结
2021/06/30 Java/Android