詳解AngularJS controller調(diào)用factory
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" 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- AngularJS之自定義服務(wù)詳解(factory、service、provider)
- AngularJS自定義服務(wù)與fliter的混合使用
- Angularjs 自定義服務(wù)的三種方式(推薦)
- AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密
- angularjs封裝$http為factory的方法
- angularJS Provider、factory、service詳解及實(shí)例代碼
- 簡(jiǎn)介AngularJS中使用factory和service的方法
- angularjs自定義ng-model標(biāo)簽的屬性
- 詳解AngularJS中自定義過濾器
- AngularJS創(chuàng)建自定義指令的方法詳解
- AngularJS基于factory創(chuàng)建自定義服務(wù)的方法詳解
相關(guān)文章
AngularJS動(dòng)態(tài)生成div的ID源碼解析
這篇文章主要介紹了基于AngularJS動(dòng)態(tài)生成div的ID,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,對(duì)angularjs動(dòng)態(tài)生成div的id相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08
淺談angularjs依賴服務(wù)注入寫法的注意點(diǎn)
下面小編就為大家?guī)硪黄獪\談angularjs依賴服務(wù)注入寫法的注意點(diǎn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
詳解angularjs popup-table 彈出框表格指令
angular select 默認(rèn)值設(shè)置方法
angular+bootstrap的雙向數(shù)據(jù)綁定實(shí)例
詳解為生產(chǎn)環(huán)境編譯Angular2應(yīng)用的方法

