如何重新编译使用“replace: true”的 Angular 1.x 指令答案

【问题标题】：How to recompile an Angular 1.x directive that uses "replace: true"如何重新编译使用“replace: true”的 Angular 1.x 指令
【发布时间】：2018-09-28 22:23:51
【问题描述】：

总结

我正在使用配置 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

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

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

【问题讨论】：

cl-image 真的需要replace：真的吗？您可以扩展它并使其替换：false。
我也尝试过这种方法，但无法让它发挥作用。我想我可能知道为什么它不起作用。今晚回家后，我会尝试再次装饰指令，如果仍然无法获得它，则发布代码。
我可以装饰指令来制作replace: false，但是当我这样做时，cl-image 指令没有正确嵌入并且图像没有显示。
我明白了。您发布的代码不包含按钮。基本上，您需要在事件侦听器中执行 $compile()。
我从控制器和视图中添加了一些代码。希望它现在更有意义。当我单击“旋转”时，它会在视图中更新leader.cloudinary_angle。我在指令中对此进行了关注（请参阅“不起作用#1”）。我没有得到新的图像，而是在视图中得到<cloudimage leader="leader" class="ng-isolate-scope">[object HTMLImageElement]</cloudimage>。

标签： angularjs angularjs-directive cloudinary

【解决方案1】：

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

应该是：

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

【讨论】：

【解决方案2】：

是时候进行肮脏的黑客攻击了...您可以在具有单个元素的数组上使用 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');
    }
  }
})

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

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

【讨论】：