動態加載視圖到頁面上點擊

我有一個AngularJS應用程序，它看起來是這樣的：從左邊到右邊的場景動態加載視圖到頁面上點擊

enter image description here

用戶點擊和拖動對象。整個頁面是由$ routeProvider加載的視圖。我想這樣做，當用戶點擊場景中的項目時，會出現一個信息框，顯示與該對象相關的屬性等等（如上圖所示）。

我假設我需要給已拖入場景的每個對象賦予ng-click屬性，然後在與ng-click相關聯的方法中，執行將在視圖中加載的內容顯示信息框，但我不確定如何做到這一點。

來源

2013-09-05 Jordan

閱讀關於ng-include –

我讀過關於ng-include的內容，但我不確定如何使用它來動態加載視圖。我只需創建一個包含div的字符串，將ng-include屬性設置爲視圖的路徑，然後$編譯字符串並將其附加到頁面上？ – Jordan

您需要某種方式來存儲對所選項目的引用，然後在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方法，並將被點擊的對象。其餘的事情發生自動。

來源

2013-09-05 15:34:14

這正是我所期待的，謝謝！ – Jordan

動態加載視圖到頁面上點擊

回答

相關問題