JSON verilerini AngularJS Önyükleme modalına enjekte etme

Question

Bu sorunun cevabı için tüm S-O üzerinde arama yaptım, ancak özel durumum için hiçbir işe yaramadı. Bu potansiyel olarak bir çift ise lütfen beni affet.

Yapmaya çalıştığım şey, JSON verilerini bir modele (UI-Bootstrap kullanan) yerleştirmekti, ancak sorun yaşadım. Googling yoluyla bulunan birçok farklı örneği denedim, ancak hiçbir şey verileri göstermedi.

ben kalıcı pencere için yeni bir görünümü oluşturulur ve kod şuna benzer:

<md-scroll-shrink><header sticky layout="row" layout-xs="column" class="header"> 
    <h3 class="text-center affix-top ">User Directory</h3> 
</header> 
</md-scroll-shrink> 


<div layout="row" layout-md="column"> 


    <div flex> 
     <md-card id="card" ng-repeat="user in users"> 
     <md-card-title> 
      <md-card-title-text> 
      <span class="md-headline">{{user.name}}</span> 
      <span class="glyphicon glyphicon-phone"></span> 
      <span class="md-subhead">{{user.email}}</span> 
      </md-card-title-text> 
      <md-card-title-media> 

      </md-card-title-media> 
     </md-card-title> 
     <md-card-actions layout="row" layout-align="end center"> 
     <button ng-click="open()" class="btn btn-success">More Info</button> 
     </md-card-actions> 
     </md-card> 
    </div> 







</div> 

: şöyle ki bu kalıcı main.html (Ana görünümde) üzerine denir

<div ng-controller="MainCtrl"class="modal-header"> 
      <h3 class="modal-title">More Info</h3> 
     </div> 
     <div class="modal-body"> 
     <p>{{user.username}}</p> 
      <ul> 
       <li ng-repeat="user in users"> 
        <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ user.username }}</a> 
       </li> 
      </ul> 
      Selected: <b>{{ user.username }}</b> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
     </div> 

Ayrıca

'use strict'; 

/** 
* @ngdoc function 
* @name peapodTestApp.controller:MainCtrl 
* @description 
* # MainCtrl 
* Controller of the peapodTestApp 
*/ 

angular.module('peapodTestApp') 
    .controller('ModalInstanceCtrl',function($scope,$uibModalInstance,UserService){ 
    $scope.ok = function() { 
    $uibModalInstance.close(); 
    }; 

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

    .controller('MainCtrl', function ($scope,UserService,$uibModal,$log) { 
    this.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma', 
     'ngMaterial' 
    ]; 

    $scope.users = UserService; 
    $scope.animationsEnabled = true; 

    $scope.open = function (UserService,size) { 

    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'views/modal.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
     user: function() { 
      return $scope.user; 
     } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
    }; 



    }) 
    .service('UserService',function(){ 
    var user = [{ 

    "id": 1, 

    "name": "Leanne Graham", 

    "username": "Bret", 

    "email": "Sincere@april.biz", 

    "address": { 

     "street": "Kulas Light", 

     "suite": "Apt. 556", 

     "city": "Gwenborough", 

     "zipcode": "92998­3874", 

     "geo": { 

      "lat": "­37.3159", 

      "lng": "81.1496" 

     } 

    }, 

    "phone": false, 

    "website": "hildegard.org", 

    "company": { 

     "name": "Romaguera­Crona", 

     "catchPhrase": "Multi­layered client­server neural­net", 

     "bs": "harness real­time e­markets", 



    } 

}, 

{ 

    "id": 2, 

    "name": "Ervin Howell", 

    "username": "Antonette", 

    "email": "Shanna@melissa.tv", 

    "address": { 

     "street": "Victor Plains", 

     "suite": "Suite 879", 

     "city": "Wisokyburgh", 

     "zipcode": "90566­7771", 

     "geo": { 

      "lat": "­43.9509", 

      "lng": "­34.4618" 

     } 

    }, 

    "phone": "010­692­6593 x09125", 

    "website": "anastasia.net", 

    "company": { 

     "name": "Deckow­Crist", 

     "catchPhrase": "Proactive didactic contingency", 

     "bs": "synergize scalable supply­chains" 

    } 

}, 

{ 

    "id": 3, 

    "name": "Clementine Bauch", 

    "username": "Samantha", 

    "email": "Nathan@yesenia.net", 

    "address": { 

     "street": "Douglas Extension", 

     "suite": "Suite 847", 

     "city": "McKenziehaven", 

     "zipcode": "59590­4157", 

     "geo": { 

      "lat": "­68.6102", 

      "lng": "­47.0653" 

     } 

    }, 

    "phone": "", 

    "website": "ramiro.info", 

    "company": { 

     "name": "Romaguera­Jacobson", 

     "catchPhrase": "Face to face bifurcated interface", 

     "bs": "e­enable strategic applications" 

    } 

}, 

{ 

    "id": 4, 

    "name": "Patricia Lebsack", 

    "username": "Karianne", 

    "email": "Julianne.OConner@kory.org", 

    "address": { 

     "street": "Hoeger Mall", 

     "suite": "Apt. 692", 

     "city": "South Elvis", 

     "zipcode": "53919­4257", 

     "geo": { 

      "lat": "29.4572", 

      "lng": "­164.2990" 

     } 

    }, 

    "phone": "493­170­9623 x156", 

    "website": "kale.biz", 

    "company": { 

     "name": "Robel­Corkery", 

     "catchPhrase": "Multi­tiered zero tolerance productivity", 

     "bs": "transition cutting­edge web services" 

    } 

}, 

{ 

    "id": 5, 

    "name": "Chelsey Dietrich", 

    "username": "Kamren", 

    "email": "Lucio_Hettinger@annie.ca", 

    "address": { 

     "street": "Skiles Walks", 

     "suite": "Suite 351", 

     "city": "Roscoeview", 

     "zipcode": "33263", 

     "geo": { 

      "lat": "­31.8129", 

      "lng": "62.5342" 

     } 

    }, 

    "phone": "(254)954­1289", 

    "website": "demarco.info", 

    "company": { 

     "name": "Keebler LLC", 

     "catchPhrase": "User­centric fault­tolerant solution", 

     "bs": "revolutionize end­to­end systems" 

    } 

}, 

{ 

    "id": 6, 

    "name": "Mrs. Dennis Schulist", 

    "username": "Leopoldo_Corkery", 

    "email": "Karley_Dach@jasper.info", 

    "address": { 

     "street": "Norberto Crossing", 

     "suite": "Apt. 950", 

     "city": "South Christy", 

     "zipcode": "23505­1337", 

     "geo": { 

      "lat": "­71.4197", 

      "lng": "71.7478" 

     } 

    }, 

    "phone": "", 

    "website": "ola.org", 

    "company": { 

     "name": "Considine­Lockman", 

     "catchPhrase": "Synchronised bottom­line interface", 

     "bs": "e­enable innovative applications" 

    } 

}, 

{ 

    "id": 7, 

    "name": "Kurtis Weissnat", 

    "username": "Elwyn.Skiles", 

    "email": "Telly.Hoeger@billy.biz", 

    "address": { 

     "street": "Rex Trail", 

     "suite": "Suite 280", 

     "city": "Howemouth", 

     "zipcode": "58804­1099", 

     "geo": { 

      "lat": "24.8918", 

      "lng": "21.8984" 

     } 

    }, 

    "phone": "210.067.6132", 

    "website": "elvis.io", 

    "company": { 

     "name": "Johns Group", 

     "catchPhrase": "Configurable multimedia task­force", 

     "bs": "generate enterprise e­tailers" 

    } 

}, 

{ 

    "id": 8, 

    "name": "Nicholas Runolfsdottir V", 

    "username": "Maxime_Nienow", 

    "email": "Sherwood@rosamond.me", 

    "address": { 

     "street": "Ellsworth Summit", 

     "suite": "Suite 729", 

     "city": "Aliyaview", 

     "zipcode": "45169", 

     "geo": { 

      "lat": "­14.3990", 

      "lng": "­120.7677" 

     } 

    }, 

    "phone": "586.493.6943 x140", 

    "website": "jacynthe.com", 

    "company": { 

     "name": "Abernathy Group", 

     "catchPhrase": "Implemented secondary concept", 

     "bs": "e­enable extensible e­tailers" 

    } 

}, 

{ 

    "id": 9, 

    "name": "Glenna Reichert", 

    "username": "Delphine", 

    "email": "Chaim_McDermott@dana.io", 

    "address": { 

     "street": "Dayna Park", 

     "suite": "Suite 449", 

     "city": "Bartholomebury", 

     "zipcode": "76495­3109", 

     "geo": { 

      "lat": "24.6463", 

      "lng": "­168.8889" 

     } 

    }, 

    "phone": "(775)976­6794 x41206", 

    "website": "conrad.com", 

    "company": { 

     "name": "Yost and Sons", 

     "catchPhrase": "Switchable contextually­based project", 

     "bs": "aggregate real­time technologies" 

    } 

} 

]; 

    return user; 
    }) 

, BTW Daha erken bir q güncellemeye çalıştık:

Ve nihayet burada ana kontrolör (main.js) 'dir Uestion ama asla bir cevap almadı. Herhangi bir ipucu varsa, yardım için çok memnun olurum. Teşekkürler

UPDATE Maalesef, JSON değerlerimi görüntülemek için modelimi alma konusunda sorun yaşıyorum, önerilen düzeltmeleri denedim ve hala hiçbir şey ... diğer önerilerde yardımcı olabilirsiniz. Teşekkür

Answer 1

modalInstanceCtrl "=

.controller('ModalInstanceCtrl',function($scope,$uibModalInstance,user){ 
    $scope.user = user; 

    $scope.ok = function() { 
     $uibModalInstance.close(); 
    }; 

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

ayrıca ng-tekrar` kullanıcıların tabanını almak zorunda kalacak modal görüşe göre yerine userService