モーダルでいくつかのモデルを表示するには？

Question

テーブルに含まれるデータのいくつかをモーダルに渡すのは難しいですが、行と言うことにします。これはsetRowある

<td> 
    <a ng-if="row.vat_list.length > 1" href="#/someUrl" data-toggle="modal" data-target="#vatModal" ng-click="setRow(row)">{{row.vat_list[0].vat_number}}</a> 

：

$scope.setRow = function (row){ 
        $scope.row= row; 
       }; 

、これは私がモーダルを開くために書いたディレクティブです。ここ

は私が

HTMLを書いたコードです：

.directive('modalDialog', function(DISPATCHER_BROADCAST) { 
      return { 
      restrict: 'E', 
      scope: { 
       row: '=' 
      }, 
      transclude: true, 
      link: function(scope, elem, attrs) { 
      }, 
      templateUrl: 'modules/dispatcher/modal.tpl.html' 
      }; 
     }); 

、これはモーダルのテンプレートです：

<div id="vatModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">{{ 'STORIC_VAT' | translate}}</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="table-responsive" style="overflow-x:visible;" > 
      <table class="table" > 
       <thead> 
        <tr> 
         <th class="col-order">{{'VAT_NUMBER' | translate}}</th> 
         <th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th> 
         <th class="col-order">{{'START_DATE'| translate}}</th> 
         <th class="col-order">{{'END_DATE'| translate}}</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="row in row.vat_list"> 
         <td>{{row.vat_number}}</td> 
         <td>{{row.customer_denomination}}</p></td> 
         <td>{{row.start_date}}</td> 
         <td>{{row.end_date}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
      </div> 
     </div> 
    </div> 

、これは私が私のモーダルを宣言する方法です：

<modal-dialog ng-model="row"></modal-dialog> 

は、基本的には、ここで私の指示ができないようですコントローラのスコープをディレクティブのスコープにバインドするため、モーダルのテーブルにはヘッダーのみがあり、ダイナミックモデルはありません

何かヒント？どこが間違っていたのですか？

編集：ここ

が私のHTMLのサンプルです：私は、デバッグしようとした場合

<td> 
    <a ng-if="row.vat_list.length > 1" href="#/dispatcher/spot" data-toggle="modal" data-target="#vatModal" ng-click="setRow(row)">{{row.vat_list[0].vat_number}} 
     <modal-dialog row="row"></modal-dialog> 
    </a> 
     </td> 

は基本的に、私は私のリンクをクリックしたとき、ありますビット、ページロード、ディレクティブがロードされたときにことを確認指示との相互作用がありません

Answer 1

まあ、私はあなたのコードを再現し、正常に動作します。 jsfiddle

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function() { 
 
    var vm = this; 
 

 
    vm.rows = [{ 
 
     vat_list: [{ 
 
     name: "vat 0" 
 
     }] 
 
    }, { 
 
     vat_list: [{ 
 
     name: "vat 1" 
 
     }, { 
 
     name: "vat 11" 
 
     }, { 
 
     name: "vat 12" 
 
     }] 
 
    }, { 
 
     vat_list: [{ 
 
     name: "vat 2" 
 
     }, { 
 
     name: "vat 21" 
 
     }, { 
 
     name: "vat 22" 
 
     }] 
 
    }, { 
 
     vat_list: [{ 
 
     name: "vat 3" 
 
     }] 
 
    }, ]; 
 

 
    vm.setRow = function(row) { 
 
     vm.row = row; 
 
    }; 
 
    }) 
 
    .directive('modalDialog', function() { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     row: '=' 
 
     }, 
 
     transclude: true, 
 
     link: function(scope, elem, attrs) {}, 
 
     template: `<h3>Modal dialog</h3> 
 
     \t \t \t \t \t \t <table ng-if="row"> 
 
        <tr ng-repeat="row in row.vat_list"> 
 
         <td>{{row.name}}</td> 
 
        </tr> 
 
        </table>` 
 
    }; 
 
    });;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController as vm"> 
 
    <div ng-repeat="row in vm.rows"> 
 
     <a href="#" ng-click="vm.setRow(row)">{{row.vat_list[0].name}}</a> 
 
    </div> 
 
    <modal-dialog row="vm.row"></modal-dialog> 
 
    </div> 
 
</div>