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

Question

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



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

我假设我需要为每个被拖到场景中的对象提供一个 ng-click 属性，然后在与 ng-click 关联的方法中，执行一些将加载到显示信息的 View 中的操作框，但我不确定如何执行此操作。

Answer 1

您需要以某种方式存储对所选项目的引用，然后在 ng-include 中引用该对象的属性。指示。

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

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

然后选定的项目将有一个名为 viewUrl 的属性。或一些这样的。

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

View 将类似于:

<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方法并传递被点击的对象。其余的会自动发生。