Accessing variable from controller in html

Question

I am trying to make an edit form pop-up as the show page but I am unable to get the data in popup html. Pop-up Code:

 <script type="text/ng-template" id="myModalContent.html">
  <div class="modal-header">
      <h3 class="modal-title">I am a modal!</h3>
  </div>
  <div class="modal-body">
    <h1>{{ visitor11.first_name }}</h1>       
    <div ng-app="VisitorCenter" ng-controller="visitorsController">
      <div ng-repeat="visitor22 in visitors">
        <p>{{ visitor22.first_name }} {{ visitor22.last_name }}</p>
      </div>
    </div>
  </div>

  <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</script>

But this "{{ visitor11.first_name }}" is not working.

Js file:

$scope.open = function (index) {

visitor = $scope.visitors[index]
var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  // size: size,
  resolve: {
    visitor11: function(){
      alert(visitor.first_name +" "+ visitor.last_name);
      return visitor;
    }
  }
});

return visitor;

};

ModalInstanceCtrl:

 visitorCenter.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

   $scope.ok = function () {
    $modalInstance.close();
   };

   $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
   };
 });

How can I get this 'visitor' object in my popup html. Please don't try to make any sense of my code above because it won't make any. i am just doing random stuff for learning angularJs. Just look at the problem.

I don't see ModalInstanceCtrl defined in your HTML structure!! — RahulB
– RahulB, Commented Oct 24, 2014 at 14:57

karaxuna · Accepted Answer · 2014-10-24 14:58:22Z

1

You should do following in ModalInstanceCtrl:

function ModalInstanceCtrl($scope, visitor11){
    $scope.visitor11 = visitor11;
}

To use variable in view, first it must be property of $scope object

answered Oct 24, 2014 at 14:58

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3691308 · Accepted Answer · 2014-11-10 14:29:12Z

0

I solved it by modifying instance controller. I thought that 'return visitor' in resolve is passing this variable to my html but it was passing this to ModalInstanceCtrl controller. Just added one line to use this in my html

visitorCenter.controller('ModalInstanceCtrl', function ($scope, $modalInstance, visitor11)        
{
    $scope.visitor11 = visitor11;
    .
    .
    .
}

Now this variable 'visitor11' is ready to be used in html.

answered Nov 10, 2014 at 14:29

user3691308

131 silver badge3 bronze badges

1 Comment

karaxuna Over a year ago

If you looked at my answer, you would not have spent 15 days figuring out what was wrong :D

Collectives™ on Stack Overflow

Accessing variable from controller in html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related