AngularJS中ng-view内第三方库（如Loading Bar）无法工作求助

我帮你搞定这个问题！首先得弄明白为什么会出现这种情况：

ldBar这类第三方库的工作逻辑是，在页面初始DOM加载完成后，自动扫描页面中所有带有.ldBar类的元素并完成初始化。但ng-view里的内容是动态加载的——只有当路由切换时，对应的模板才会被插入到DOM中，这时候ldBar已经完成了第一次扫描，自然不会处理后来新增的元素。

下面给你针对ldBar的具体解决方案，用AngularJS的自定义指令来处理，这也是Angular生态中处理DOM相关第三方库的标准做法：

步骤1：定义自定义指令 #

在你的AngularJS模块中添加一个指令，用来接管ldBar的初始化逻辑：

// 替换成你的应用模块名
angular.module('yourAppModule', ['ngRoute'])
.directive('ldBar', function() {
  return {
    restrict: 'C', // 匹配class选择器，对应我们用的.ldBar
    link: function(scope, element) {
      // 用原生DOM元素初始化ldBar（element是JQLite对象，[0]取原生节点）
      new ldBar(element[0]);
    }
  };
});

步骤2：在ng-view模板中正常使用ldBar #

现在你在ng-view加载的模板里，直接写原来的ldBar元素就行，不需要做任何修改：

<!-- 这是路由对应的模板文件，比如dashboard.html -->
<div class="ldBar label-center" style="width:50%;height:50%;margin:auto" data-value="35" data-preset="circle"></div>

这样做的原理是：每当带有ldBar类的元素被插入到DOM中（比如ng-view加载完成时），Angular会自动触发指令的link函数，我们在这里手动初始化ldBar实例，完美解决了动态DOM无法被库自动扫描的问题。

进阶：支持动态更新进度值 #

如果需要在Angular控制器中动态修改进度条的值，可以给指令添加双向绑定支持：

angular.module('yourAppModule', ['ngRoute'])
.directive('ldBar', function() {
  return {
    restrict: 'C',
    scope: {
      // 自定义属性ld-value，用于绑定Angular变量
      progressValue: '=ldValue'
    },
    link: function(scope, element) {
      const barInstance = new ldBar(element[0]);
      
      // 监听绑定的变量变化，自动更新进度条
      scope.$watch('progressValue', function(newValue) {
        if (newValue !== undefined) {
          barInstance.set(newValue);
        }
      });
    }
  };
});

然后在模板中绑定控制器的变量：

<div class="ldBar label-center" style="width:50%;height:50%;margin:auto" ld-value="currentProgress" data-preset="circle"></div>

对应的控制器代码：

angular.module('yourAppModule')
.controller('DashboardController', function($scope) {
  // 初始进度值
  $scope.currentProgress = 35;
  
  // 模拟动态更新，比如2秒后改成70
  setTimeout(() => {
    $scope.$apply(() => {
      $scope.currentProgress = 70;
    });
  }, 2000);
});

这样就能实现进度值的动态更新了，完全符合Angular的数据绑定逻辑。

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