Bind data to modal

Question

I am trying to pass some data with a function to display on a modal, yet the usual approaches to binding are not working, I was hoping someone could point me in the right direction.

  $scope.openModal = function (obj) {


    //$scope.data = {type: obj.type, descriptions: obj.description, isDone: obj.isDone, createDate: obj.createDate, priority: obj.priority};

    $scope.data = obj;

    console.log($scope.data);

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'modalTemplate.html',
      controller: 'View1Ctrl',
      resolve: {
        data: function () {
          return $scope.data;
        }
      }
    });
  }

Template

<!-- MODAL -->


<div>
<div ng-controller="View1Ctrl">
<script type="text/ng-template" id="modalTemplate.html">
        <div class="modal-header">
            <h3 class="modal-title">Item Details</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li>Type: <span ng-model="data.type"></span></li>
                <li>Description: <span ng-model="data.description"></span></li>
                <li>Date: <span ng-model="data.createDate"></span></li>
                <li>Priority: <span ng-model="data.priority"></span></li>
                <li>Finished: <span ng-model="data.isDone"></span></li>
            </ul>
        </div>
        <div class="modal-footer">
        <button class="btn btn-primary" ng-click="$close()">OK</button>
        </div>
    </script>
</div>

Also tried {{data.type}} etc, and ng-bind. I now my $scope.data is populated because it is showing as much in the console.

possible duplicate of http://stackoverflow.com/questions/33286851/angularjs-passing-data-to-bootstrap-modal — Narendra CM, Feb 22 '16 at 06:10
@entre the information I want to display on the modal isn't showing. Type:, Description: etc is blank — Code Grasshopper, Feb 22 '16 at 06:10
Removed View1Ctrl, and injected data into controller. It works now, thanks to @NarendraCM for the link to that question! — Code Grasshopper, Feb 22 '16 at 06:14

score 1 · Accepted Answer · answered Feb 22 '16 at 06:07

1

You should inject data (resolve object) into your modal controller then add it to the $scope object.

answered Feb 22 '16 at 06:07

Mahmoud

844
1
10
17

score 1 · Answer 2 · answered Feb 22 '16 at 06:11

1

You should remove ng-controller="View1Ctrl" from template.

answered Feb 22 '16 at 06:11

Hadi J

16,989
4
36
62

Bind data to modal

2 Answers2