【问题标题】:Directive does not link from controller($scope) after updating from 1.2.x从 1.2.x 更新后,指令未从控制器($scope)链接
【发布时间】:2015-10-09 01:43:49
【问题描述】:

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

例如,我有一个性别下拉列表["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 所做的重大更改有关,并且它们现在的作用域隔离方式有效,但我承认我有点难过。

您能否就如何修复此便利指令提供一些建议?

【问题讨论】:

    标签: javascript html angularjs angularjs-directive angularjs-scope


    【解决方案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 - 工作示例

    【讨论】:

    • 这是一个合适的解决方法,谢谢。在当前实现之前,我曾经使用过编译技术——它更可取,因为语法更简洁,不需要第二次编译。我会再等几天再解决问题。
    • 嘿,您是否取得了任何进展或找到了替代解决方案?
    • 嘿,对不起,我已经 5 天没上班了。谢谢你的提问,我现在也可以解决这个问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-30
    • 1970-01-01
    • 2013-05-16
    • 1970-01-01
    • 2014-07-09
    • 1970-01-01
    • 2016-08-28
    相关资源
    最近更新 更多