如何設計與多個模型角度應用程序，並選擇字段

Question

我想要建立的是一個SPA包含多個選擇在一個頁面上，其中每個選擇有它自己的模型。在選擇框中選擇不同的選項可以顯示/隱藏頁面上的其他字段並修改其他選擇的數據（加載不同的集合）。最後，兩個選項中的選項可能會更改url（所以當頁面加載了正確的地址時，這兩個選項將被預先選定）。 現在我想知道什麼是最好的方法。

首先。在這種情況下，切換到ui路由器是否值得？

二。我需要寫一個自定義的指令，這種選擇，那將具有以下功能

1. 負荷數據的收集
2. 顯示數據，並記住選擇
3. 重載它的數據集時，其他選擇觸發它
4. 重裝其他選擇的數據

現在我已經寫過指令，但從來沒有這樣（我認爲）複雜。這就是爲什麼我想到的幾個問題。

如何將不同的數據綁定到我的指令？ 這應該只是一個單一的大規模複雜指令或將其分割成較小的部分（如一個用於顯示關閉選擇框的指令和另一個用於顯示列表等的指令）？ 如何在觸發事件時更改數據並偵聽來自其他選擇的類似事件。通過控制器？

在此先感謝您的幫助。

Answer 1

我可以建議的是保持MVC。下面是解之一 -

1. 創建一個控制器，用於存儲模型數據（這裏$scope.selectOptions內部控制器）
2. 傳遞這個值以「選擇的指令」實例，以顯示
3. 每當用戶選擇在指令值，傳遞選擇的值提供給控制器（可以說在控制器$scope.selectedValue被保持該值）
4. 在控制器上$scope.selectedValue，並在其回叫呼叫爲不同的數據爲另一選擇選項設置添加$watch。（可以說存儲在$scope.anotherSelectOption該數據集）
5. 通過這$scope.anotherSelectOption爲「第二指令」實例
6. 每當用戶選擇在第二指令，所選的值提供給控制器（該值，通允許在控制器$scope.anotherSelectedValue說的是保持該值）
7. 在控制器上$scope.anotherSelectedValue，並在其回調變更網址的事情添加$watch你想要做

這是你的HTML的樣子 -

<div ng-controller="MyCtrl"> 
    <select-directive selection-option="selectOptions", selected-option="selectedValue"> </select-directive> 
    <select-directive selection-option="anotherSelectOptions", selected-option="anotherSelectedValue"> </select-directive> 
</div> 

這是你的控制器，它會是這個樣子 -

yourApp.controller('MyCtrl', function($scope) { 

    $scope.selectOptions = []; // add init objects for select 
    $scope.selectedValue = null; 

    $scope.$watch('selectedValue', function() { 
     // here load new values for $scope.anotherSelectOptions 
     $scope.anotherSelectOptions = [] // add init objects for select 
     $scope.anotherSelectedValue = null; 
    }); 

    $scope.$watch('anotherSelectedValue', function() { 
     // here add code for change URL 
    }); 

}); 

這是你的指令範圍

yourApp.directive('selectDirective', function() { 
    return { 
     templateUrl: 'views/directives/select.html', 
     restrict: 'E', 
     scope: { 
      selectionOption: '=', 
      selectedOption: '=' 
     } 
    }; 
});