AngularJSを使用して詳細モーダルでデータをロード

AngularJSを使用してモーダルにデータをロードしようとしています。私はデータを "カード"のリストにロードして正常に動作します。しかし、各カードには、詳細モーダルを開いて残りのデータをロードする必要があります。/AngularJSを使用して詳細モーダルでデータをロード

//のindex.htmlの一部

<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 /コントローラ/カード-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 /ディレクティブ：私のコードに従ってくださいモーダルダイアログ.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 irectives /モーダル-dialog.html（ディレクティブのテンプレート）

<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

カードが正常に表示されているとモーダルを開きますが、表示されません。モーダル内のAE値（この場合、私は値 "user"をテストしていますが、jsonにはより多くのデータがあります）。私はちょうど静的な値を挿入すると、それが表示されます...

出典

2016-04-06 Atoyansk

私はそれを別のファイルに別のファイルで保持し、別のコントローラを使用して、私はそれを解決してModalコントローラにデータを渡すだろうキーワード。しかし、両方のテンプレートで同じコントローラを使用しているためです。この機能を実現するには、$ scope.SelectedCardという別の変数を保持することができます。あなたtoggleModal方法であなたは、カードを割り当てることができます。

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

、あなたがに変更することができモーダルで：

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

出典

2016-04-06 09:49:34

私はモーダルする別のファイルを使用しています、ただ「ディレクティブタグ」であり、私はあなたが何を意味するかを理解していれば同じhtmlで）。私はhtmlのこの部分を含む投稿を更新しました...そして申し訳ありませんが、問題はそのままです。多分別のコントローラをモーダルにすることは解決策になるでしょう。 – Atoyansk

AngularJSを使用して詳細モーダルでデータをロード

答えて

関連する問題