Javascript 使用AngularJS加载细节模式中的数据_Javascript_Angularjs_Angularjs Directive_Modal Dialog

Javascript 使用AngularJS加载细节模式中的数据

javascript angularjs

Javascript 使用AngularJS加载细节模式中的数据,javascript,angularjs,angularjs-directive,modal-dialog,Javascript,Angularjs,Angularjs Directive,Modal Dialog,我正在尝试使用AngularJS将数据加载到模式中。我将数据加载到一个“卡片”列表中，效果很好。但是，对于每一张卡，我需要打开一个details模式并加载其中的其余数据。按照我的代码： //index.html的一部分 <body ng-controller="CardsController"> <div class="container"> <div class="cards" ng-repeat="card in cards">

我正在尝试使用AngularJS将数据加载到模式中。我将数据加载到一个“卡片”列表中，效果很好。但是，对于每一张卡，我需要打开一个details模式并加载其中的其余数据。按照我的代码：

//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/directions/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/directives/modal-dialog.html（指令模板）

卡片显示正常，模式打开，但不显示模式中的AE值（在本例中，我只是测试值“user”，但json有更多数据）。如果我只插入一个静态值，它会显示…

我会将模态html保存在一个单独的文件中，并使用一个单独的控制器，然后使用resolve关键字将数据传递给模态控制器。但由于您在两个模板上使用相同的控制器。您可以保留一个名为$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>


{{selectedCard.user}我正在使用单独的文件来建模，只是“directive标记”在同一个html中（如果我正确理解您的意思的话）。我更新了包含这部分html的帖子。。。很抱歉，问题仍然存在。也许对模态进行单独的控制器是解决方案。
angular.module('angstudy', ['modalDialog']);

$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>