为 Angular 指令添加多个“要求”选项

Posted 2023-02-22

【中文标题】为 Angular 指令添加多个“要求”选项

【英文标题】：Adding Multiple 'require' Options for Angular Directive

【发布时间】：2014-06-23 03:54:00

【问题描述】：

通常在指令中，如果我想将范围传递给它，我会使用require: 'ngModel'。这工作正常。但我现在正在创建一个指令，该指令创建 5 个不同的 html 元素，每个元素都具有从父级传递的不同 ngModel。需要作为属性传递的 ngmodel 是 ngModel1, ngModel2, ngModel3, ngModel4, ngModel5。如何在指令内的require 条件中添加多个选项？

我试过这些，但它不起作用：

require: ['ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'],

和

require: 'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5',

和

require: 'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5',

和

require: 'ngModel1, ngModel2, ngModel3, ngModel4, ngModel5',

如何添加多个 require 选项？

编辑：

HTML 代码：

<div get-vehicles-checkbox
            cars-ng-model="formData.cars"           
            bikes-ng-model="formData.bikes"         
            trucks-ng-model="formData.trucks"           
            van-ng-model="formData.van"         
            bus-ng-model="formData.bus"     
></div>

指令：

app.directive('getVehiclesCheckbox', function($compile)  
  return 
    restrict: 'A',
    replace:true,
    // require: ?
    scope:             
      carsNgModel: '=',
      bikesNgModel: '=',
      trucksNgModel: '=',
      vanNgModel: '=',
      busNgModel: '='
    ,

    controller: 'SomeController',

    link: function(scope, element, attrs, carsNgModel, bikesNgModel, trucksNgModel, vanNgModel, busNgModel) 

      scope.carsNgModel = ,
        scope.bikesNgModel = ,
        scope.trucksNgModel = ,
        scope.vanNgModel = ,
        scope.busNgModel = 

      var html = '<span ng-repeat="car in cars">' +
          '<input type="checkbox" ng-model="carsNgModel[car.code]">  car.number   car.description ' + 
          '</span>' +

          '<span ng-repeat="bike in bikes">' +
          '<input type="checkbox" ng-model="bikesNgModel[bike.code]">  bike.number   bike.description ' + 
          '</span>';

      //.... etc.. etc.....


      // COMPILE HTML
      //... .... ...

    
  
);

【问题讨论】：

文档说：require: ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent']

等等，你能给我们看看你的 html 吗？我感觉你没有以正确的方式使用它。

谢谢@JoseM 我在上面的问题中添加了一个示例 html 和指令代码。我知道对我来说另一种方法是为每辆车设置单独的指令，但我希望全部合二为一以避免冗余。

require 选项不提供范围访问；它提供对其他指令控制器的访问。由于您似乎将所有内容都包含在一个指令中，因此这里似乎没有必要。

虽然您误解了使用require功能的原因，但您的问题仍然有效。我有需要访问多个指令控制器方法的情况。我可以使用 require 从父指令访问方法，如下所示：'require:"^parentDirective"' 但我还需要访问单独指令中的方法，文档说要使用这样的字符串数组：'require :["^parentDirective","directiveTwo"]' 但是这样做会导致错误，尽管这两个指令都已编译到 DOM。我在这里错过了什么吗？

【参考方案1】：

app.directive('myDirective', function() 
  return 
    restrict: "A",
    require:['^parentDirective', '^ngModel'], 
    link: function ($scope, $element, $attrs, controllersArr) 
      // parentDirective controller
      controllersArr[0].someMethodCall();

      // ngModel controller         
      controllersArr[1].$setViewValue(); 
    
  
);

【讨论】：

顺便添加一个 ?就在 ^ 或 ^^ 之后将使 require “可选”，如果它不是 required 指令，则 angular 不会抛出错误。然后你需要做的就是在链接的控制器参数上设置一个 if() 并且你有一个可选的 require。

所以我得出结论，就像在 OP 上的 cmets 中看到的那样，他们真的不需要 require，是这样吗？