每個AngularJS廠裝載數據點擊

有很多的文件，所以也許你角愛好者會明白我的解釋，或者能夠按照我上面提供的plunker。

我正在創建一個模塊化網頁的演示。即使該頁面的主要內容將在另一個模板文件中。在主內容視圖中，有一個鏈接表，該鏈接打開一個角引導模式（另一個模板/控制器），該模式顯示所點擊對象的附加信息。

我發現每次點擊鏈接時，工廠都在檢索源數據。對於小的事情來說，這並不明顯，但如果您對大數據集執行AJAX請求或將XML轉換爲JSON，則可能需要一段時間。我不確定這是否是路由的結果，或者如果它是一個糟糕的實現的正是我試圖完成，但我想：

明白爲什麼這種情況正在發生
獲取初始數據一旦和控制器

data.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; 

});

來源

2014-04-16 vol7ron

你可以試試這個，它最初返回一個空數組將被填充時$http.get() returns並重新使用陣列的每個調用時：

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)

來源

2014-04-16 17:41:08

請忽略我的其他評論，我不回來'factory.people'，我並沒有修改控制器，一旦我做了，我發現它的工作，現在我只需要知道你做了什麼 - - 我試着做類似的事情，但是我傳入'$ scope'或者使用'$ rootScope'並檢查那裏的'.people';似乎引用'工廠'是我應該做的事情。 – vol7ron

它將數據存儲在單身的工廠中，並在每次詢問時提供。它返回一個空數組以開始，因此您可以綁定一些內容並啓動調用以獲取實際數據，然後填充現有數組。 Angular會檢測新數據並綁定到所有內容，以便您可以看到它。 –

如果我以後有空，我可能會另外提出一個問題。對於大型數據集或那些檢索時間拖延很長的數據集，我發現儘管使用了'ng-cloak'，仍然顯示句柄/鬍鬚（模板佔位符）。當主頁面內容不在視圖中時，這不會發生 - 任何想法？ – vol7ron

每個AngularJS廠裝載數據點擊

回答

相關問題