Pass an AngularJS $scope variable to new controller when link clicked

Question

I have an app that uses dynamic routing to load modal windows, with each window displaying one "activity" object from a JSON file. Currently I'm using the route to determine which card is visible, and then calling a data service to fill in the data based on a match with the route name.

But I don't like this solution, as it isolates my current card from the context of the array. I would far prefer to be able to pass the card object from the template, because then I will know what the $index is, which I can then use to navigate to "prev" and "next" elements.

If I have this mark-up:

 <div ng-controller="MenuCtrl">
  <ul class="menu">
  <li ng-repeat="card in cards">
    <a href="#/page/{{ card.shortName }}">{{ card.shortName }} </a>
  </li>
 </ul>
 </div>

Which triggers this $routeProvider:

$routeProvider
    .when('/page/:name', {
        templateUrl : 'modalContainer',
        controller : 'ModalContainerCtrl'
    })

Which brings up this controller:

.controller('ModalContainerCtrl',['$scope', '$modal', '$route', function($scope, $modal, $route) {

var modalInstance = $modal.open({
    templateUrl : '../assets/templates/modal.html',
    controller: 'ModalCtrl'
});

$scope.activity = $route.current.pathParams.name;
console.log($scope.activity);

//Modal controls
$scope.close = function () {
    console.log("close!");
    $modalInstance.close();
};

}])

is there any way I can pass the card object to ModalContainerCtrl via this routing or any other means?

card object is a scope object of ModalContainerCtrl?

V31
– V31

2014-09-20 19:19:36 +00:00
Commented Sep 20, 2014 at 19:19 — V31
– V31, Commented Sep 20, 2014 at 19:19

V31 · Accepted Answer · 2014-09-20 19:22:06Z

1

You can pass a scope object to a modal window controller using the resolve (definition of resolve Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS route). So in your case it can be done like this:

.controller('ModalContainerCtrl',['$scope', '$modal', '$route', function($scope, $modal, $route) {
//your card object
$scope.card = '';

var modalInstance = $modal.open({
    templateUrl : '../assets/templates/modal.html',
    controller: 'ModalCtrl',
    resolve: {
        card: function () {
              return $scope.card;
              }
    }
});

$scope.activity = $route.current.pathParams.name;
console.log($scope.activity);

//Modal controls
$scope.close = function () {
    console.log("close!");
    $modalInstance.close();
};

}])

and in the modal controller:

var ModalCtrl = function ($scope, $modalInstance,card) {
    //Modal controls
    //card now can be used over here
    $scope.close = function () {
      console.log("close!") //This will now run
      modalInstance.close();
    };
}

answered Sep 20, 2014 at 19:22

V31

7,6643 gold badges28 silver badges44 bronze badges

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

2 Comments

Ila Over a year ago

Actually card is an element of array cards, which is a variable in a separate scope, the MenuCtrl. I would need to pass it from MenuCtrl to ModalContainerCtrl when the route occurs.

V31 Over a year ago

You need to use service and then using services broadcast from there....let me set an example for u

Collectives™ on Stack Overflow

Pass an AngularJS $scope variable to new controller when link clicked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related