AngularJS:$ decorator将新变量绑定到指令

Question

我正在使用装饰器将变量添加到指令的隔离范围.但不知何故,它不起作用,我几乎尝试了一切.

精确指令是angular-ui之一:

.directive('accordionGroup', function() {
  return {
    require:'^accordion',         // We need this directive to be inside an accordion
    restrict:'EA',
    transclude:true,              // It transcludes the contents of the directive into the template
    replace: true,                // The element containing the directive will be replaced with the template
    templateUrl:'template/accordion/accordion-group.html',
    scope: {
      heading: '@',               // Interpolate the heading attribute onto this scope
      isOpen: '=?',
      isDisabled: '=?'
    },
    ...
})

$ decorator代码,我用它来更改模板并添加一个新变量:

mainModule.config(['$provide', function ($provide){

    $provide.decorator('accordionGroupDirective', function($delegate) { 
          var directive = $delegate[0];
          directive.templateUrl = "views/parts/accordion-unit.html";
          angular.extend(directive.scope, { index:'@' });
          return $delegate;
    });
}]);

然后,在我添加:index="$index"并在模板中我使用它打字{{index}},但总是未定义...

有什么建议？谢谢

Answer 1

确认这是Angular 1.3.x中的一个错误:https://github.com/angular/angular.js/issues/10149

目前的解决方法是使用.$$isolateBindings指令代替.scope.以下是代码的解决方法:

mainModule.config(['$provide', function ($provide){

    $provide.decorator('accordionGroupDirective', function($delegate) { 
          var directive = $delegate[0];
          directive.templateUrl = "views/parts/accordion-unit.html";
          directive.$$isolateBindings.index = {
              attrName: 'index',
              mode: '@',
              optional: true
          };
          return $delegate;
    });
}]);