Ayrıntılar, angularJS kullanarak modal veri yükleme

AngularJS kullanarak verileri kalıcı olarak yüklemeye çalışıyorum. Veriyi "kartlar" listesine yükledim ve iyi çalışıyor. Ancak, her bir karta, bir ayrıntı modunu açmam ve verilerin geri kalanını kendi içine yüklemem gerekiyor. kodumu takip edin: index.html 'ninAyrıntılar, angularJS kullanarak modal veri yükleme

// Part

<body ng-controller="CardsController"> 
    <div class="container"> 

    <div class="cards" ng-repeat="card in cards"> 
     <h3>{{card.user}}</h3> 
     <button type="button" name="play" title="play" ng-click="toggleModal(card)">Play</button> 
    </div> 

    </div> 

    <my-modal show='modalShown' width='250px' height='40%'> 
    <h3>{{card.user}}</h3> <-- here is my problem! 
    </my-modal>

// js/kontrolörleri/kartları-controller.js

angular.module('angstudy').controller('CardsController', function($scope,  $http){ 
    $scope.cards = []; 

    $http.get('http://localhost:3000/api/persons') 
    .success(function(retorno){ 
     console.log(retorno); 
    $scope.cards = retorno; 
    }) 
    .error(function(erro) { 
     console.log(erro); 
    }); 


    $scope.modalShown = false; 

    $scope.toggleModal = function(card) { 
    $scope.modalShown = !$scope.modalShown; 
    }; 
});

// js/direktifler/modal-dialog.js

angular.module('modalDialog', []) 
.directive('myModal', function() { 
    var ddo = {}; 

    ddo.restrict = "E"; 
    ddo.transclude = true; 

    ddo.scope = { 
     user: '@user', 
     show: '=' 
    }; 

    ddo.link = function(scope, element, attrs) { 
     scope.dialogStyle = {}; 
     if (attrs.width) 
     scope.dialogStyle.width = attrs.width; 
     if (attrs.height) 
     scope.dialogStyle.height = attrs.height; 
     scope.hideModal = function() { 
     scope.show = false; 
     }; 
    }; 

    ddo.templateUrl = 'js/directives/modal-dialog.html'; 

    return ddo; 
});

// js/d Direktifleri'nin/modal-dialog.html (yönergesi için şablon)

<div class='ng-modal' ng-show='show'> 
    <div class='ng-modal-overlay' ng-click='hideModal()'></div> 
    <div class='ng-modal-dialog' ng-style='dialogStyle'> 
    <div class='ng-modal-close' ng-click='hideModal()'>X</div> 
    <div class='ng-modal-dialog-content'></div> 
    </div> 
</div>

// js/main.js

angular.module('angstudy', ['modalDialog']);

kartları normalde görüntülendikten ve kalıcı açar, fakat göstermez Modaldaki AE değerleri (bu durumda, sadece "user" değerini test ediyorum, fakat json daha fazla veriye sahiptir). Eğer sadece bir statik değer eklerseniz, o zaman ...

kaynak

2016-04-06 Atoyansk

Bunu yapmak için, modal html'yi ayrı bir dosyada tutarak ve ayrı bir kontrolör kullanarak veriyorum ve verileri çözelti ile Modal denetleyiciye iletirim. anahtar kelime. Ancak, aynı denetleyiciyi her iki şablonda da kullandığınız için. İşlevsellik elde etmek için $ scope.SelectedCard adlı ayrı bir değişken tutabilirsiniz. Sizin değiştirebilir

$scope.toggleModal = function(card) { 
    $scope.modalShown = !$scope.modalShown; 
    $scope.selectedCard = card; 
};

ve modal: Eğer ATA kart edebilirsiniz toggleModal yönteminde Ben modal ayrı bir dosya kullanıyorum

<my-modal show='modalShown' width='250px' height='40%'> 
    <h3>{{selectedCard.user}}</h3> <-- problem solved 
</my-modal>

kaynak

2016-04-06 09:49:34

, sadece "yönergesi etiketi" dir Aynı html'de (ne demek istediğimi anladıysam). Ben html bu kısmı da dahil olmak üzere yazı güncellendi ... Ve üzgünüm, ama sorun devam ediyor. Belki de ayrı bir kontrol ünitesini modüle yapmak çözüm olacaktır. – Atoyansk

Ayrıntılar, angularJS kullanarak modal veri yükleme

cevap

İlgili konular