如何重新编译使用 "replace: true" 的 Angular 1.x 指令

Question

总结

我正在使用配置 replace: true 的第三方指令。

我想在每次用户单击按钮时重新编译该指令。我已经尝试了几件没有运气的事情。例如，我尝试将 Cloudinary 指令包装在我自己的指令中，但我似乎无法获取它。任何帮助将不胜感激。

依赖关系

"angular": "1.6.2",
"cloudinary-core": "^2.5.0",
"cloudinary_ng": "^1.1.1",

控制器

$scope.rotate = (leader) => {
  leader.cloudinary_angle = {
    '0': '90',
    '90': '180',
    '180': '270',
    '270': '0'
  }[leader.cloudinary_angle] || '0';
};

查看

<div ng-repeat="leader in leaders">
  <a href="#" ng-click="rotate(leader)">Rotate</a>
  <cloudimage leader="leader"></cloudimage>
</div>

没用 #1

angular.module('app').directive('cloudimage', ($compile) => {
  return {
    restrict: 'E',
    replace: false,
    scope: {
      leader: '='
    },
    link: (scope, element) => {

      let cloudinaryImage = $compile('<cl-image angle="' + scope.leader.cloudinary_angle + '"' +
                                              ' crop="fit"' +
                                              ' format="jpg"' +
                                              ' height="150"' +
                                              ' public-id="' + scope.leader.cloudinary + '"' +
                                              ' quality="80"' +
                                              ' width="150"' +
                                      '></cl-image>'
                            )(scope);

      element.html(cloudinaryImage[0]);

      scope.$watch('scope.leader.cloudinary_angle', (cloudinaryImage) => element.html(cloudinaryImage[0]));
    }
  };
});

没用 #2

angular.module('app').directive('cloudimage', ($compile) => {
  return {
    restrict: 'E',
    replace: false,
    scope: {
      leader: '='
    },
    template: '<cl-image crop="fit" format="jpg" height="150" angle="{{angle}}" public-id="{{id}}" quality="80" width="150"></cl-image>',
    link: (scope, element) => {
      scope.angle = scope.leader.cloudinary_angle || 0;
      scope.id = scope.leader.cloudinary;
    }
  };
});

没用 #3

我可以修饰第 3 方指令以使其成为 replace: false，但这会破坏其嵌入。

angular.module('app').config(['$provide', function($provide) {
  $provide.decorator('clImageDirective', function($delegate) {
      var directive = $delegate[0];    
      directive.replace = false;
      return $delegate;
  })
}]);

Answer 1

肮脏的黑客时间...您可以使用 ng-repeat 在具有单个元素的数组上重新编译任何内容（包括一次性绑定，任何指令）：

  <body ng-controller="MainCtrl" ng-init="arr = [{}]">
    <button ng-click="arr = [{}]">Recompile</button>
    <p test ng-repeat="o in arr"></p>
  </body>

测试指令在哪里

app.directive('test', function() {
  return {
    replace: true,
    template: '<span>hello</span>',
    link: function() {
      console.log('I am linked');
    }
  }
})

P.S。你可以用 ng-if 做同样的事情，但是你需要 2 个摘要。 P.P.S。我同意这有点奇怪。

http://plnkr.co/edit/vlC7TV8eIrW1tLgcvP7Y?p=preview

Answer 2

#1 不起作用，因为 html() 需要一个字符串，而不是 DOM 元素。 cloudinaryImage 不应将元素转换为字符串，因为这会破坏有关元素的信息。

应该是：

scope.$watch('scope.leader.cloudinary_angle', (cloudinaryImage) => { 
  element.empty().append(cloudinaryImage)
});

如何重新编译使用 "replace: true" 的 Angular 1.x 指令

How to recompile an Angular 1.x directive that uses "replace: true"

angularjs

cloudinary

angularjs-directive