温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在AngularJS中使用controller对factory进行调用

发布时间:2021-03-10 15:47:53 阅读:183 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

怎么在AngularJS中使用controller对factory进行调用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1、定义 factory.js 文件

var appFactorys = angular.module('starter.factorys', []) 
appFactorys.factory('HouseFactory', function () { 
  var houseList = [ 
    { id0, title'急售北二环 小区配套齐全 精装修', price'88.0', describe'2室1厅 120平米', img'img/ben.png' }, 
    { id1, title'急售东二环 小区配套齐全 精装修', price'88.0', describe'2室1厅 120平米', img'img/max.png' }, 
    { id2, title'急售南二环 小区配套齐全 精装修', price'87.0', describe'2室1厅 120平米', img'img/adam.jpg' }, 
    { id3, title'急售西二环 小区配套齐全 精装修', price'86.0', describe'2室1厅 120平米', img'img/perry.png' }, 
    { id4, 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 = [ 
  //   { id0, title'急售北二环 小区配套齐全 精装修', price'88.0', describe'2室1厅 120平米', img'img/ben.png' }, 
  //   { id1, title'急售东二环 小区配套齐全 精装修', price'88.0', describe'2室1厅 120平米', img'img/max.png' }, 
  //   { id2, title'急售南二环 小区配套齐全 精装修', price'87.0', describe'2室1厅 120平米', img'img/adam.jpg' }, 
  //   { id3, title'急售西二环 小区配套齐全 精装修', price'86.0', describe'2室1厅 120平米', img'img/perry.png' }, 
  //   { id4, 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" > 
    <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>

看完上述内容,你们掌握怎么在AngularJS中使用controller对factory进行调用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×