详解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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
深入理解js promise chain
May 05 Javascript
javascript关于继承解析
May 10 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
vue.js的安装方法
May 12 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
如何实现iframe父子传参通信
Feb 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中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python坐标线性插值应用实现
2019/11/13 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
python Timer 类使用介绍
2020/12/28 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
社区维稳工作方案
2014/06/06 职场文书
大学军训的体会
2014/11/08 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
文明上网主题班会
2015/08/14 职场文书
2016寒假假期总结
2015/10/10 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript