详解AngularJS controller调用factory

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> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持鸟哥教程(niaoge.com)。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#niaoge.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。