ng-include a view with a Controller and with a variable from another Controller

Question

Setting:

I have an angular app

I have a table of geographies. And it shows a names and descriptions.

What I Want:

I want a small view of geography's details to display if the user clicks on a given geography in the table. This view will contain many more bits of information. It will be controlled by a different controller than the table.

main.html:

<div ng-if="displaySingle" ng-controller="GeographyController">
    <div ng-include="'html/geography-detail.html'" ng-controller="GeographyDetailController"></div>
</div>


<tr ng-repeat="geography in geographies" ng-controller="GeographyController">
    <td ng-click="displaySingleFunction(geography.id)">{{geography.name}}</td>
    <td>{{geography.description}}</td>
</tr>

The issue here is that when the user clicks on a given row, I need to pass the id from the that row to the GeographyDetailController. But the controller for that row is in the GeographyController.

Question:

How do I make this line of code:

<div ng-include="'html/geography-detail.html'" ng-controller="GeographyDetailController"></div>

pass a single ID to the GeographyDetailController?

What I Have:

Clicking a given row can make my detail view appear and disappear, it just cannot send that view and its controller the ID that I need it to.

UPDATE 1

This works if I want to follow a link to the page, but I don't, I want to include this view into a larger view.

ui-sref="geographyDetail({uuid:geography.uuid})"

Kenany · Accepted Answer · 2017-10-30 21:15:07Z

1

From that I see, GeographyDetailController is a child controller of GeographyController . Then there are several ways to pass the parameter.

You can use the $scope or $rootScope event. That is, when user click on the row, you emit event ($scope.$emit or $rootScope.$emit) from GeographyController , pass your id and call $scope.$on or $rootScope.$on in GeographyDetailController to get the id.
Or you can do like this: when user click on the row, you add a new field in the $scope ($scope.myParam = id) inside the GeographyController and get it like this in the GeographyDetailController ($scope.$parent.myParam).

Personally, I advise you to use the second method.

answered Oct 30, 2017 at 21:15

Kenany

5204 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

ng-include a view with a Controller and with a variable from another Controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related