CODEWITHSUNDEEP
angularjs
Jordan
Jordan

Reputation: 938

Dynamically load view into page on click

I have an AngularJS app which looks like this:

enter image description here

The user clicks and drags objects from the left into the scene on the right. The entire page is a view that is loaded by the $routeProvider. I want to make it so that when the user clicks on an item that is in the scene, an information box will come up below showing properties associated with that object and so on (as shown at the bottom of the image above).

I'm assuming that I would need to give an ng-click attribute to each object that has been dragged into the scene, and then in the method associated with the ng-click, do something that will load in a view that shows the info box, but I'm not really sure how to do this.

Upvotes: 2

Views: 4389

Answers (1)

Nick Larsen
Nick Larsen

Reputation: 18877

You need someway to store a reference to the selected item, and then reference a property of that object in an ng-include directive.

An easy way to do this is to set some controller for the entire page which manages the selected item.

function SomeHighLevelController($scope) {
    $scope.selectedItem = { viewUrl: 'someDefaultContent.html' };
    $scope.setSelectedItem = function(item) {
        $scope.selectedItem = item;
    }
}

And then the selected item would have a property called viewUrl or some such.

{
    // other properties
    viewUrl: 'ballDetails.html'
}

And the view would be something like:

<div ng-controller="SomeHighLevelController">
   <div id="objects" ng-controller="SomeMadeUpControllerName">
       <!-- and all the junk in here -->
   </div>
   <div id="scene" ng-controller="SomeOtherMadeUpControllerName">
       <!-- and all the junk in here -->
   </div>
   <div id="details" ng-include src="selectedItem.viewUrl">
   </div>
</div>

When an item is clicked on, you call the setSelectedItem method and pass the object that was clicked on. The rest happens automagically.

Upvotes: 3

Related Questions