angularjs - 单击时将视图动态加载到页面中

Question

我有一个 AngularJS 应用程序，它看起来像这样：

用户从左侧单击并将对象拖到右侧的场景中。整个页面是由 $routeProvider 加载的视图。我想让它这样当用户点击场景中的一个项目时，一个信息框会出现在下面，显示与该对象关联的属性等等（如上图底部所示）。

我假设我需要为已拖入场景的每个对象赋予一个 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方法并传递被点击的对象。其余的会自动发生。