0

我正在尝试构建的是一个包含多个选择的 SPA，其中每个选择都有自己的模型。在选择框中选择不同的选项可能会显示/隐藏页面上的其他字段并修改其他选择的数据（加载不同的集合）。最后，两个选择中的选项可能会更改 url（因此当页面加载了正确的地址时，这两个选项将被预先选择）。现在我想知道这里最好的方法是什么。

第一的。在这种情况下是否值得切换到 ui-router ？

第二。我需要为此选择编写一个自定义指令，它将具有以下功能

  1. 加载数据收集
  2. 显示数据并记住选择
  3. 当其他选择触发它时重新加载它的数据收集
  4. 为其他选择重新加载数据

现在我以前写过指令，但从来没有这样（我认为）复杂的东西。这就是为什么我想到的问题很少。

如何将不同的数据绑定到我的指令？这应该只是一个庞大的复杂指令还是将其划分为更小的部分（例如一个用于显示关闭选择框的指令和另一个用于显示列表的指令等等）？如何在应该更改数据时触发事件并从另一个选择中侦听类似事件。通过控制器？

提前感谢您的所有帮助。

4

1 回答 1

1

我可以建议的是保留它 MVC。这是解决方案之一 -

  1. 创建一个控制器来存储模型数据（在$scope.selectOptions控制器内部）
  2. 将此值传递给“选择指令”实例以显示
  3. 每当用户在指令中选择值时，将该选定值传递给控制器​​（假设控制器$scope.selectedValue中持有该值）
  4. 在控制器中添加并$watch在$scope.selectedValue其回调调用中为另一个选择选项设置不同的数据集。（假设将该数据集存储在$scope.anotherSelectOption）
  5. 将此传递$scope.anotherSelectOption给“第二指令”实例
  6. 每当用户在第二个指令中选择值时，将该选定值传递给控制器​​（假设在控制器$scope.anotherSelectedValue中持有该值）
  7. 在控制器中添加并$watch在$scope.anotherSelectedValue其回调中更改您想要做的事情

这是您的 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: '='
        }
    };
});
于 2014-09-24T00:33:03.553 回答