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

我明白你现在遇到的困境：用了配置replace: true的Cloudinary指令，想通过点击按钮触发它重新编译，但试了自定义指令包裹等方法都没效果。结合你用的Angular 1.6.2、cloudinary-core 2.5.0和cloudinary_ng 1.1.1版本，给你几个可行的解决方案：

方法一：用ng-if强制重新渲染（最简单） #

Angular的ng-if指令会在条件变化时销毁并重新创建DOM元素，这刚好能触发Cloudinary指令的重新编译。步骤如下：

1. 在HTML中把Cloudinary指令包裹在带ng-if的容器里：

<div ng-if="showCloudinary">
  <img 
    cloudinary="leader.cloudinary_options" 
    angle="{{leader.cloudinary_angle}}"
    <!-- 其他Cloudinary属性 -->
  />
</div>

2. 在控制器的rotate方法里，通过切换ng-if的条件来触发重新渲染（记得注入$timeout）：

app.controller('YourController', ['$scope', '$timeout', function($scope, $timeout) {
  // 初始化条件为true
  $scope.showCloudinary = true;

  $scope.rotate = (leader) => {
    // 更新角度参数（这里根据你的实际逻辑调整）
    leader.cloudinary_angle = leader.cloudinary_angle === '0' ? '90' : '0';
    
    // 先隐藏，再延迟显示，触发ng-if的重建
    $scope.showCloudinary = false;
    $timeout(() => {
      $scope.showCloudinary = true;
    });
  };
}]);

这个方法的核心是利用ng-if的销毁重建机制，让Cloudinary指令每次条件切换时都重新编译，完美避开replace: true带来的DOM替换问题。

方法二：手动用$compile服务重新编译元素 #

如果不想用ng-if，可以直接手动获取目标元素，用Angular的$compile服务重新编译并替换原元素：

1. 给Cloudinary图片元素加一个唯一标识（比如结合leader的id）：

<img 
  id="cloudinary-img-{{leader.id}}"
  cloudinary="leader.cloudinary_options" 
  angle="{{leader.cloudinary_angle}}"
/>

2. 在控制器中注入$compile，并在rotate方法里执行重新编译：

app.controller('YourController', ['$scope', '$compile', function($scope, $compile) {
  $scope.rotate = (leader) => {
    // 更新角度参数
    leader.cloudinary_angle = leader.cloudinary_angle === '0' ? '90' : '0';
    
    // 获取目标DOM元素
    const targetElement = document.getElementById(`cloudinary-img-${leader.id}`);
    if (!targetElement) return;

    // 构建新的Cloudinary img元素（保留所有必要属性）
    const newImg = angular.element(`
      <img 
        id="cloudinary-img-${leader.id}"
        cloudinary="leader.cloudinary_options" 
        angle="{{leader.cloudinary_angle}}"
      />
    `);

    // 编译新元素并链接到当前作用域
    $compile(newImg)($scope);
    
    // 替换原元素
    angular.element(targetElement).replaceWith(newImg);
  };
}]);

方法三：自定义指令封装并监听参数变化 #

如果你之前尝试过自定义指令但没成功，可能是没正确监听参数变化。试试这个封装方式：

1. 创建自定义指令，监听leader.cloudinary_angle的变化，自动重新编译内部的Cloudinary指令：

app.directive('dynamicCloudinary', ['$compile', function($compile) {
  return {
    restrict: 'E',
    scope: {
      leader: '='
    },
    link: function(scope, element) {
      // 监听角度参数的变化（开启深度监听适配对象类型的参数）
      scope.$watch('leader.cloudinary_angle', function(newAngle) {
        if (!newAngle) return;
        
        // 清空指令容器
        element.empty();
        
        // 构建Cloudinary img元素
        const cloudinaryImg = angular.element(`
          <img 
            cloudinary="leader.cloudinary_options" 
            angle="${newAngle}"
          />
        `);
        
        // 编译并添加到容器中
        $compile(cloudinaryImg)(scope);
        element.append(cloudinaryImg);
      }, true);
    }
  };
}]);

2. 在HTML中使用这个自定义指令：

<dynamic-cloudinary leader="leader"></dynamic-cloudinary>

这样每次leader.cloudinary_angle变化时，自定义指令都会重新创建并编译Cloudinary指令，解决重新编译的问题。

注意事项 #

• 确保Cloudinary指令的属性是动态绑定的（比如用{{}}或者双向绑定），静态值不会触发更新。
• 如果你的leader.cloudinary_angle是对象类型（比如你代码里的{ '0': '90' }），记得用$watch的第三个参数true开启深度监听，否则Angular检测不到对象内部的变化。

内容的提问来源于stack exchange，提问作者Kirkland