AngularJS自定义指令中如何重新加载templateUrl？

嘿，我来帮你搞定这个需求！首先得明确：AngularJS的双向绑定本来就应该自动帮你更新视图，但如果是遇到了绑定没触发，或者确实需要强制重新加载模板的情况，咱们分两种场景来处理：

1. 优先用双向绑定自动更新（推荐） #

你的指令用了scope: { orderItem: '=' }这种双向绑定，正常情况下，只要你修改了orderItem的值，视图应该自动同步更新。如果没更新，大概率是你的更新操作没在Angular的digest循环里。

举个例子，如果你的按钮点击函数里用了原生setTimeout或者第三方异步操作：

// 指令的controller或link函数里
$scope.updateOrder = function() {
  // 异步更新orderItem，不在Angular的digest循环内
  setTimeout(() => {
    $scope.orderItem.quantity = 5;
    // 这里视图不会自动更新
  }, 1000);
};

这种情况你需要手动触发digest，要么用$apply包裹，要么直接用Angular封装的$timeout（它会自动触发digest）：

// 用$apply的写法
$scope.updateOrder = function() {
  setTimeout(() => {
    $scope.$apply(() => {
      $scope.orderItem.quantity = 5;
    });
  }, 1000);
};

// 更推荐的$timeout写法
$scope.updateOrder = function() {
  $timeout(() => {
    $scope.orderItem.quantity = 5;
  }, 1000);
};

如果是同步修改orderItem，直接改就行，Angular会自动帮你更新视图，不用额外操作。

2. 强制重新加载模板（特殊场景） #

如果你确实需要完全重新加载模板文件（比如模板内容本身是动态生成的，不是单纯的scope数据变化），可以试试这两种方法：

方法一：动态切换templateUrl #

把指令的templateUrl改成动态绑定的，用一个scope变量来控制切换：

.directive('orderItemDetails', function () {
  return {
    restrict: 'E',
    scope: {
      orderItem: '=',
      reloadFlag: '=' // 新增一个控制重新加载的标记
    },
    templateUrl: function(elem, attrs) {
      // 根据标记切换模板，empty-template.html可以是个空的占位模板
      return attrs.reloadFlag ? 'empty-template.html' : 'orders/orderItemDetails.html';
    },
    link: function(scope) {
      // 监听标记变化，切换后重置标记，实现重新加载
      scope.$watch('reloadFlag', function(isReloading) {
        if (isReloading) {
          setTimeout(() => {
            scope.$apply(() => {
              scope.reloadFlag = false;
            });
          }, 100);
        }
      });
    }
  };
})

然后在父组件或者模板里，点击按钮时设置reloadFlag = true，就能触发模板重新加载了。

方法二：手动编译替换模板 #

在指令的link函数里，手动请求模板内容，编译后替换当前元素：

.directive('orderItemDetails', function ($http, $compile) {
  return {
    restrict: 'E',
    scope: {
      orderItem: '='
    },
    link: function(scope, elem) {
      // 封装加载模板的函数
      const loadTemplate = () => {
        $http.get('orders/orderItemDetails.html')
          .then(res => {
            // 清空当前元素，插入新模板并编译
            elem.html(res.data);
            $compile(elem.contents())(scope);
          });
      };

      // 初始化加载模板
      loadTemplate();

      // 按钮点击触发重新加载
      scope.reloadTemplate = () => {
        loadTemplate();
      };
    }
  };
})

然后在你的模板里加个按钮：

<button ng-click="reloadTemplate()">重新加载模板</button>

小提醒 #

• 尽量优先用双向绑定的自动更新，手动重新加载模板是非常规操作，会有额外的性能开销。
• 如果是orderItem的深层属性变化没被检测到，可以试试用$watchCollection来监听对象变化，或者手动调用$scope.$digest()触发更新。

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