详解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中的property和attribute介绍
Dec 26 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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备份/还原MySQL数据库的代码
2011/01/06 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python实现Youku视频批量下载功能
2017/03/14 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Django实现学员管理系统
2019/02/26 Python
python实现翻译word表格小程序
2020/02/27 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
学习决心书
2014/03/11 职场文书
关于爱国的标语
2014/06/24 职场文书
商场收银员岗位职责
2015/04/07 职场文书
导游词之峨眉山
2019/12/16 职场文书