Question

我做了一个指令，通过将它们注入到隔离的指令中，帮助我减少了我需要注入主应用程序控制器的依赖项数量。

例如，我有一个性别["MALE, "FEMALE"]的下拉列表。我已将此数组注册为值提供程序。这是在AngularJS 1.2.28

中起作用的指令的简单示例

指令：

module.directive('appGenderOptions', ['genders', function(genders) {
  return {
    restrict: 'A',
    require: 'ngModel',
    controller: function($scope) {
      $scope.genders = genders;
    },
    compile: function(elem, attr) {
      attr.ngOptions = 'g for g in genders';
    }
  };
}]);

查看：

<select ng-model="person.gender" app-gender-options></select>

因此，当链接此指令时，它会将性别添加到选择列表并绑定到模型，而不必将性别注入主控制器。

更新到最新版本1.4.2后，性别不再附加到选择列表中。我怀疑它与1.3中对HTML编译器$compile所做的重大更改有关，并且它们的范围隔离现在可以正常工作，但我承认我有点难过。

请您就如何修复此便利指令向我提供一些建议？

Answer 1

这是一个奇怪的问题，在审核Migration docs时，我无法获得有关更改内容的足够信息，以指出可能破坏了1.2示例的内容。我有兴趣详细了解，但作为您的问题的解决方法，以下内容应该为您解决...

注意我已注入$compile服务，您将在示例中看到

compile: function(elem, attr) {
    elem.removeAttr('app-gender-options'); // necessary to avoid infinite compile loop
    elem.attr('ng-options', 'g for g in genders');
    return function(scope) {
        $compile(elem)(scope);
    };
}

JSFiddle Link - 工作示例

从1.2.x更新后，指令不从控制器（$ scope）链接

1 个答案: