Javascript AngularJS动态添加指令

要将指令动态添加到DOM中，必须使用$compile服务。 到目前为止还不错，但在我对这个问题的研究过程中，我没有找到一个类似的案例来发现差异并孤立问题

完整的代码可以在这里看到：

正如您所看到的，来自“UploadController”的$scope数据似乎没有正确地应用于“ProgressDialog”指令。除了比例，它根本不会显示当前和最大MB

// the compiling stuff is done here
$compile(progress)($scope);
$('#uploadButton').replaceWith(progress)
...

---

此代码示例与上下文无关。它是Socket.io和NodeJS文件上传程序的一部分。我不太习惯使用Angular，所以我很难阅读或理解他们的文档和示例。。。希望能提前得到帮助和感谢

问题在于，您没有像对待current value和max value那样，将current mb和max mb传递给progress指令。在启动函数中设置属性。将这些属性添加到progress指令中。然后更新模板以使用这些更新的属性。（我稍微更改了他们的名字，这样更容易绑定）

在上载控制器中：

$scope.startUpload = function() {
   var progress = angular.element(document.createElement('progress-dialog'));
   progress.attr('cur-val', $scope.curVal);
   progress.attr('max-val', $scope.maxVal);
   progress.attr('curmb', $scope.curMB);
   progress.attr('maxmb', $scope.maxMB);

   $compile(progress)($scope);
   $('#uploadButton').replaceWith(progress)
}

在进度指令中：

 scope: {
    curVal: '@',
    maxVal: '@',
    maxmb:  '@',
    curmb:  '@'
  },

并更新进度模板：

<span class="text-center">
  <p>{{curVal}}% - {{curmb}}/{{maxmb}} MB</p>
  <div class='progress-bar'>
    <div class='progress-bar-bar'>
    </div>
   </div>
</span>

{{curVal}}%-{{curmb}}/{{maxmb}}}MB

这就解决了它！实际上，我在发帖之前尝试过这个解决方案，但我想我把max-mb和max-mb的拼写搞砸了