详解AngularJS controller调用factory
程序员文章站
2022-03-20 15:01:10
1、定义 factory.js 文件
var appfactorys = angular.module('starter.factorys', [])
app...
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 详解Angular-Cli中引用第三方库
推荐阅读
-
对angularjs框架下controller间的传值方法详解
-
angularJS Provider、factory、service详解及实例代码
-
AngularJS基于factory创建自定义服务的方法详解
-
angularjs $http调用接口的方式详解
-
AngularJS 控制器 controller的详解
-
详解AngularJS controller调用factory
-
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
-
对angularjs框架下controller间的传值方法详解
-
详解在AngularJS的controller外部直接获取$scope
-
AngularJS 控制器 controller实例详解