AngularJS的設計問題 - 嵌套視圖

Question

我是AngularJS的新手，我正面臨與視圖相關的問題。我有這樣的（僞代碼）的模型

class Contract{ 
    int IdContract; 
    int Title; 
    int IdPerson; 
} 

class Person{ 
    int IdPerson; 
    string FirstName; 
string LastName; 
} 

現在，我應該有這條​​路線的myapp /合同/編輯相匹配的視圖contractEdit.html。在該觀點中，應該有某種嵌套視圖來顯示與我正在編輯的合同相關聯的人員詳細信息。我應該如何與Angular做到這一點？我對Views和Directives感到困惑......它應該是一個指令嗎？

任何幫助將不勝感激

Answer 1

有多種方法可以解決這個問題。

首先很簡單，很髒，使用ng-include。例如。創建一個名爲PersontTmpl.html模板文件：

<div> 
    {{person.firstName }} {{person.lastName}} 
</div> 

現在，每當你需要顯示一個人，確保有一個person對象的範圍，並添加以下行：

<ng-include src="'somepathToTemplate/PersonTmpl.html'"></ng-include> 

嗯，這是骯髒的解決方案，因爲你將永遠不得不向同一名稱下的作用域公開人員。

第二種方式是創建一個指示：

angular.module('nameofyourmodule') 
    .directive('person', function() { 
    return { 
     templateUrl: 'somepathToTemplate/PersonTmpl.html', 
     restrict: 'AE', 
     scope:{person:"="} 
    }; 
    }); 

現在，當你想顯示「currentPerson」你必須做以下的事情在其他模板/視圖：

<div person='currentPerson' /> 

此調用將顯示用'currentPerson'對象初始化的人員模板。

要真正理解指令是如何工作的，我建議看Writing Directives (by Misko Hevery)演示，或者嘗試閱讀official documentation

Answer 2

它不應該是指令。

您考慮嵌套視圖和您的權利。目前AngularJS不支持嵌套視圖，但有Router項目，它不會

如果你不想走那麼遠，然後堅持觀點。