Question

我需要两个兄弟指令来相互沟通。第一个选择通过REST服务填充，当您选择一个值（从第一个下拉列表）时，应启用第二个下拉列表，并且下面对象的子集应显示为其选项。

例如：如果dropdown的第一个值= dog或者dropdown = bird，那么第二个下拉列表应该只显示像意大利面条一样的SEries子集。但如果dropdown = turtle，则第二次下拉列表应显示所有SEries。

如果无论如何都要这样做而不使用父/子指令通信会很棒。

以下是Types对象：

  $scope.Types = [{
    "id": "dog",
    "name": "dog"
  }, {

    "id": "cat",
    "name": "cat"
  }, {

    "id": "bird",
    "name": "bird"
  }, {

    "id": "turtle",
    "name": "turtle"
  }];

以下是SEries对象：

$scope.Series = [{
    "id": "spaghetti",
    "name": "spaghetti"
  }, {
    "id": "eggs",
    "name": "eggs"
  }];

}）S” }];

以下是我的2条指令：

.directive('selectBox', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: false,
        template: function (element, attrs) {
            return '<div class="selectBox selector">' + '<select " class="form-control" name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" ng-options="' + attrs.optexp + '"' + '  ng-disabled="' + attrs.selectdisabled + '"></select>' + '</div>';
        }        
    };
})

.directive('selectSeries', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: false,
      template: function(element, attrs) {
        return '<div><select class="form-control" name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" ng-options="series.id as series.name for series in series" ' + '  disabled="disabled" ></select></div>';

      },

        link: function (scope, el, attrs) {
            scope.$watch('model.PlanType', function(value,b){

                if (value !== null){
                    //angular.element(el).children('select').removeAttr('disabled');
                    attrs.$set('ngOptions', 'series.id as series.name for series in series');

                }

            },this);
        }

    };

});

这是我的fiddle

Answer 1

不要试图强制兄弟元素之间的指令直接通信。兄弟元素之间没有真正的联系。它们可以很容易地添加/删除，例如，当使用ng-if时，第二次编译的元素的指令甚至可能在编译阶段不满足DOM中的第一个元素。

如果您希望“兄弟姐妹”彼此交谈并且不会泄露他们之间的沟通，那么将它们放入创建范围的容器中是您最好的选择。对于更直接/复杂的交互，您可以创建一个指令，以便将他们的通信放在他们的容器上。

创建一个只创建局部范围的指令就像这样简单：

.directive('scope', function () {
    return {
        scope: true,
        link: function () {}
    };
});

然后你可以使用它

<div scope>
    <select communicating-directive>...</select>
    <select communicating-directive>...</select>
</div>

并且您对本地作业的分配不会泄漏到容器外。

Answer 2

我不认为这是指令用法的好例子。在您的情况下，普通选择和ng更改就足够了。像这样：

<select ng-options="type.id as type.name for type in Types" ng-model="selectedType" ng-change="setEnabledSeries(selectedType)"></select>

<select ng-options="series.id as series.name for series in EnabledSeries" ng-model="selectedSeries"></select>

在你的控制器中：

$scope.setEnabledSeries = function(type) {
    $scope.EnabledSeries = blah blah blah, according to type...
}

<强>更新

有一个错字。在selectedType的函数调用中应该是type而不是ng-change。请查看正在运行的更新小提琴：http://jsfiddle.net/cp6kp6xb/1/

兄弟指令之间的指令通信

2 个答案: