个人中心
gpt4 book ai didi

javascript - AngularJS Factory 在每次点击时加载数据

转载 作者：行者123 更新时间：2023-11-28 01:22:19 25 4
gpt4 key购买 nike

Plunker

有很多文件，所以也许 Angular 爱好者会理解我的解释，或者能够遵循我上面提供的 plunker。

我正在创建一个演示来模块化网页。甚至页面的主要内容也会在另一个模板文件中。在主要内容 View 中，有一个链接表，该链接会打开一个 Angular 引导模式(另一个模板/ Controller )，它显示单击的对象的附加信息。

我发现每次单击链接时，工厂都会检索源数据。对于小数据来说，这是不易察觉的，但如果您要对大型数据集执行 AJAX 请求，或者将 XML 转换为 JSON，则这可能需要一段时间。我不确定这是否是路由的结果，或者是否是我想要实现的目标的实现不佳，但我想:

  1. 了解为什么会发生这种情况
  2. 检索一次初始数据并在 Controller 之间共享
<小时/>

数据.json

[
  {"firstName":"John",
   "lastName":"Denohn",
   "profession":"Student",
   "age":10
  },
  {"firstName":"Mark",
   "lastName":"Fatzigio",
   "profession":"Doctor",
   "age":20
  },
  {"firstName":"Jennifer",
   "lastName":"Cooler",
   "profession":null,
   "age":30
  },
  {"firstName":"Kimberly",
   "lastName":"Branch",
   "profession":"Teacher",
   "age":40
  }
]

index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
  <head>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="myApp.css" rel="stylesheet">

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>

  </head>

  <body>
    <div data-ng-view="" data-ng-cloak ></div>

    <script src="myApp.js"></script>
    <script src="myAppModels.js"></script>
    <script src="myAppControllers.js"></script>
  </body>

</html>

template_initialPageView.html

<div class="page-container" data-ng-cloak>

  <!-- Table Content -->
  <table class="table" data-ng-cloak>
    <thead>
      <tr><th colspan="{{keysToShow.length}}"><h1>People</h1></th></tr>
      <tr><th data-ng-repeat="header in keysToShow">{{ header.displayName }}</th></tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="person in people | orderBy:orderProp">
        <td><a href="#{{[person.firstName, person.lastName].join('_')}}" 
              data-ng-click="showModal(person)"
              >{{ [person.firstName, person.lastName].join(' ') }}</a></td>
        <td>{{ person.profession }}</td>
      </tr>
    </tbody>
  </table>

</div>

template_modalContentView.html

<div class="modal-header">
  <button type="button" class="close" data-ng-click="cancelModal()">&times;</button>
  <h3 class="modal-title" id="myModalLabel">Person Info</h3>
</div>
<div class="modal-body">
  <tabset>
    <tab heading="Age">
      <h4>Name</h4>
      <p>{{ person.firstName + ' ' + person.lastName }}</p>

      <h4>Age</h4>
      <pre>{{ person.age }}</pre>
    </tab>
    <tab heading="Profession">
      <h4>Name</h4>
      <p>{{ person.firstName + ' ' + person.lastName }}</p>

      <h4>Profession</h4>
      <pre>{{ person.profession }}</pre>
    </tab>
  </tabset>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" data-ng-click="closeModal()">Close</button>
</div>

myApp.js

var myApp = angular.module('myApp', ['ui.bootstrap', 'ngRoute']);

/* Routes */
myApp.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'template_initialPageView.html',
      controller: 'PageViewController',
      controllerAs: 'page'
    })
    .otherwise({
      redirectTo: '/home'
    });
});

myAppControllers.js

var myAppControllers = {};

// Define: Page View Controller
myAppControllers.PageViewController = function ($scope, $modal, modelFactory) {

  init();

  function init(){
    $scope.orderProp  = '';
    $scope.keysToShow = [{'displayName':'Fullname'},{'displayName':'Profession'}];
    modelFactory.getPeople().success(function(data){
      $scope.people = data;
    });
  }

  $scope.showModal = function(person) {
    console.log('person clicked', person);
    $scope.person = person;

    var modalInstance = $modal.open({
      controller: 'ModalController',
      controllerAs: 'modal',
      templateUrl: 'template_modalContentView.html',
      resolve: {
        person: function(){
          return $scope.person;
        }
      }
    });

  };

};


// Define: Modal Controller
myAppControllers.ModalController = function ($scope, $modalInstance, person) {
  init();

  function init(){
    $scope.person = person;
  }

  $scope.cancelModal = function (){
    $modalInstance.dismiss('cancel');
  };

  $scope.closeModal = function () {
    $modalInstance.close();
  };

};


// Add controlers to the module
myApp.controller(myAppControllers);

myAppModels.js

myApp.factory('modelFactory', function($http){
  var factory = {};

  factory.getPeople = function (){
    return $http.get('data.json');
  };

  return factory;

});

最佳答案

您可以尝试这个，它最初返回一个空数组，当 $http.get() 返回时将填充该数组，并且每次调用时都会重新使用该数组:

myApp.factory('modelFactory', function($http){
  var factory = {};

  factory.getPeople = function () {
    if (typeof(factory.people) == "undefined") {
      factory.people = [];
      $http.get('data.json').success(function(result) {
        var i = 0;
        for (i = 0; i < result.length; i++) {
          factory.people.push(result[i]);
        }
      });
    }
    return factory.people;
  };

  return factory;

});

并且不要忘记更改您的分配以接受数组并使用它:

$scope.people = modelFactory.getPeople();

(PLUNKR)

关于javascript - AngularJS Factory 在每次点击时加载数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23116199/

25 4 0
文章推荐： javascript - 从 javascript 文件中提取所有文档 block 注释
文章推荐： javascript - 新插入的 HTML 不与 Rails 嵌套表单的 JS 事件处理一起作用
文章推荐： javascript - KineticJS 移动文本路径
文章推荐： html - 使用 CSS 将 HTML(导航)类移动到容器类的顶部？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com