单击时动态加载视图到页面

Question

我有一个AngularJS应用程序，如下所示：

用户点击左侧的对象并将其拖动到右侧的场景中。整个页面是由$ routeProvider加载的视图。我想这样做，以便当用户点击场景中的项目时，下面会出现一个信息框，显示与该对象相关的属性等等（如上图所示）。 p>

我假设我需要为已经拖入场景的每个对象提供ng-click属性，然后在与ng-click相关联的方法中，执行将在视图中加载的内容显示信息框，但我不确定如何做到这一点。

Answer 1

您需要在某种程度上存储对所选项的引用，然后在ng-include指令中引用该对象的属性。

一种简单的方法是为管理所选项目的整个页面设置一些控制器。

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

然后所选项目将具有名为viewUrl的属性或其他类似的属性。

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

视图将类似于：

<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>

单击某个项目时，将调用setSelectedItem方法并传递单击的对象。其余的都是自动发生的。