溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在AngularJS中使用controller對factory進行調(diào)用

發(fā)布時間:2021-03-10 15:47:53 來源:億速云 閱讀:172 作者:Leah 欄目:web開發(fā)

怎么在AngularJS中使用controller對factory進行調(diào)用?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。

1、定義 factory.js 文件

var appFactorys = angular.module('starter.factorys', []) 
appFactorys.factory('HouseFactory', function () { 
  var houseList = [ 
    { id: 0, title: '急售北二環(huán) 小區(qū)配套齊全 精裝修', price: '88.0', describe: '2室1廳 120平米', img: 'img/ben.png' }, 
    { id: 1, title: '急售東二環(huán) 小區(qū)配套齊全 精裝修', price: '88.0', describe: '2室1廳 120平米', img: 'img/max.png' }, 
    { id: 2, title: '急售南二環(huán) 小區(qū)配套齊全 精裝修', price: '87.0', describe: '2室1廳 120平米', img: 'img/adam.jpg' }, 
    { id: 3, title: '急售西二環(huán) 小區(qū)配套齊全 精裝修', price: '86.0', describe: '2室1廳 120平米', img: 'img/perry.png' }, 
    { id: 4, title: '急售北二環(huán) 小區(qū)配套齊全 精裝修', 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中調(diào)用factory

appControllers.controller('HouseCtrl', function ($scope, $timeout, $ionicModal, $ionicActionSheet, $http, $cordovaToast, $ionicLoading, HouseFactory) { 
  // $scope.houseList = [ 
  //   { id: 0, title: '急售北二環(huán) 小區(qū)配套齊全 精裝修', price: '88.0', describe: '2室1廳 120平米', img: 'img/ben.png' }, 
  //   { id: 1, title: '急售東二環(huán) 小區(qū)配套齊全 精裝修', price: '88.0', describe: '2室1廳 120平米', img: 'img/max.png' }, 
  //   { id: 2, title: '急售南二環(huán) 小區(qū)配套齊全 精裝修', price: '87.0', describe: '2室1廳 120平米', img: 'img/adam.jpg' }, 
  //   { id: 3, title: '急售西二環(huán) 小區(qū)配套齊全 精裝修', price: '86.0', describe: '2室1廳 120平米', img: 'img/perry.png' }, 
  //   { id: 4, title: '急售北二環(huán) 小區(qū)配套齊全 精裝修', price: '85.0', describe: '2室1廳 120平米', img: 'img/mike.png' } 
  // ]; 
 
  /* 調(diào)用Factory.js數(shù)據(jù) */ 
  $scope.houseList = HouseFactory.all(); 
 
})

4、html頁面調(diào)用

<ion-list> 
  <ion-item class="item item-thumbnail-left" ng-repeat="item in houseList" href="#/housedetail/{{item.id}}" rel="external nofollow" > 
    <img ng-src="{{item.img}}"> 
    <h3>{{item.title}}</h3> 
    <dd class="assertive cus-price">{{item.price}}萬元</dd> 
    <dd class="u-f-h5">{{item.describe}}</dd> 
  </ion-item> 
</ion-list>

看完上述內(nèi)容,你們掌握怎么在AngularJS中使用controller對factory進行調(diào)用的方法了嗎?如果還想學到更多技能或想了解更多相關內(nèi)容,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI