I have an AngularJS app which looks like this:
我有一个AngularJS应用，它是这样的:
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).
用户点击并将对象从左边拖到右边的场景中。整个页面是由$routeProvider加载的视图。我想这样做，当用户单击场景中的一个项目时，下面将出现一个信息框，显示与该对象相关的属性等等(如上图底部所示)。
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.
我假设我需要给每个对象一个ng-click属性被拖进现场,然后在与ng-click相关联的方法,做一些会加载在一个视图显示信息框,但我不确定该怎么做。
1 个解决方案
#1
3
You need someway to store a reference to the selected item, and then reference a property of that object in an ng-include directive.
您需要某种方法来存储对所选项的引用，然后在ng-include指令中引用该对象的属性。
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.
然后选择的项目将有一个属性叫做viewUrl或类似的。
{
// 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.
当单击一个项目时，您将调用setSelectedItem方法并传递被单击的对象。其余自动发生。
#1
3
You need someway to store a reference to the selected item, and then reference a property of that object in an ng-include directive.
您需要某种方法来存储对所选项的引用，然后在ng-include指令中引用该对象的属性。
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.
然后选择的项目将有一个属性叫做viewUrl或类似的。
{
// 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.
当单击一个项目时，您将调用setSelectedItem方法并传递被单击的对象。其余自动发生。