使用angular-ui在模态窗口中生成表

Question

I have web angular.js web application with some buttons there. And i need to open modal window if user will press on any button. Also there is table in modal window with set of cols which depends on which button user press. I'm trying to generate table with ng-repeat but i see empty table with no one cols every time.

My table:

<table class="table">
  <th class="th" ng-repeat="col in association_cols">
    <span>{{ col.name }}</span>
  </th>
</table>

And my controller:

open_modal = function() {
    $http(......, function(data){
       $scope.association_cols = [{'name' : data.result.one}, {'name', data.result.two}]
    }
}

But every time i'm seeing empty table with no one th

I'm openning modal window with:

$modalInstance = $modal.open({'templateUrl' : "views/Window.tpl.html"});

Thank you.

Answer 1

The scope that the modal will get is not the usual scope inheritance you are used to know. Everything the modal needs should be passed via the resolve property. Also you should use a ModalController.

var myItem = {name: 'yeah'};

$modal.open({
   templateUrl : "views/Window.tpl.html",
   controller: MyModalController,
   resolve: {
     item: function() {return myItem},
   }
}).then(function(result) {
   //dialog was closed
});

MyModalController = function($scope, item) {
   $scope.item = item;
   console.log('MyModalController constructed and item was injected', item);
}

Update/Addition: With the rewritten angular-ui modal ( in versions prior to 0.6 this was the $dialogProvider) you now need to type the close/dismiss callback functions like this:

$modal.open({

}).result.then(function(result) {});

Answer 2

Your $http call's callback doesn't contain the returned data from which you populate the $scope.association_cols . It should be:

 $http(..., function(data) {...});

Did you define the modal's controller in the passed options to $modal.open() ? Add a controller property after the templateUrl