快捷導(dǎo)航

詳解AngularJS controller調(diào)用factory

更新時(shí)間：2017年05月19日 11:16:54 作者：KingCruel

本篇文章主要介紹了詳解AngularJS controller調(diào)用factory，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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 文件

復(fù)制代碼代碼如下:

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頁(yè)面調(diào)用

<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}}萬(wàn)元</dd> 
    <dd class="u-f-h4">{{item.describe}}</dd> 
  </ion-item> 
</ion-list>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Angular 2應(yīng)用的8個(gè)主要構(gòu)造塊有哪些
這篇文章主要為大家詳細(xì)介紹了Angular 2應(yīng)用的8個(gè)主要構(gòu)造塊,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
AngularJS頁(yè)面帶參跳轉(zhuǎn)及參數(shù)解析操作示例
這篇文章主要介紹了AngularJS頁(yè)面帶參跳轉(zhuǎn)及參數(shù)解析操作,結(jié)合具體實(shí)例形式分析了AngularJS使用URL傳遞參數(shù)及參數(shù)的接收、解析等相關(guān)操作技巧,需要的朋友可以參考下
2017-06-06
簡(jiǎn)述Angular 5 快速入門
這篇文章主要介紹了簡(jiǎn)述Angular 5 快速入門，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
AngularJS HTML編譯器介紹
這篇文章主要介紹了AngularJS HTML編譯器介紹,AngularJS的HTML編譯器能讓瀏覽器識(shí)別新的HTML語(yǔ)法。它能讓你將行為關(guān)聯(lián)到HTML元素或者屬性上，甚至能讓你創(chuàng)造具有自定義行為的新元素,需要的朋友可以參考下
2014-12-12
Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法示例
這篇文章主要介紹了Angular外部使用js調(diào)用Angular控制器中的函數(shù)方法或變量用法,結(jié)合實(shí)例形式分析了Angular基于外部JS調(diào)用控制器中方法與變量的具體實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下
2016-08-08
淺談Angular中ngModel的$render
下面小編就為大家?guī)?lái)一篇淺談Angular中ngModel的$render。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
Angular.js自動(dòng)化測(cè)試之protractor詳解
Protractor是一個(gè)建立在WebDriverJS基礎(chǔ)上的端到端(E2E)的AngularJS JavaScript Web應(yīng)用程序測(cè)試框架，下面這篇文章主要給大家介紹了angular.js自動(dòng)化測(cè)試之protractor的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
將Angular單項(xiàng)目升級(jí)為多項(xiàng)目的全過(guò)程
有時(shí)候在開(kāi)發(fā)的過(guò)程中發(fā)現(xiàn)一個(gè)Angular項(xiàng)目不太夠用,兩個(gè)獨(dú)立的項(xiàng)目又不太好復(fù)用,這時(shí)便需要將原來(lái)的Angular項(xiàng)目簡(jiǎn)單做個(gè)升級(jí),這篇文章主要給大家介紹了關(guān)于將Angular單項(xiàng)目升級(jí)為多項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2021-11-11
AngularJs Understanding the Controller Component
本文主要介紹AngularJs Understanding the Controller Component的內(nèi)容,這里整理了相關(guān)資料，及簡(jiǎn)單示例代碼，有興趣的小伙伴可以參考下
2016-09-09
spring+angular實(shí)現(xiàn)導(dǎo)出excel的實(shí)現(xiàn)代碼
這篇文章主要介紹了spring+angular實(shí)現(xiàn)導(dǎo)出excel的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02