AngularJS动态添加指令

Question

要将指令动态添加到DOM中，必须使用$compile服务。到目前为止一切顺利，但是在我对这个问题的整个研究中，我找不到类似的案例来查看差异并隔离问题。

完整的代码可以在这里看到：https://plnkr.co/edit/UkncNEGZDFNyamlBgeSI?p=preview

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

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

此代码示例脱离上下文。它是带有 Socket.io 和NodeJS的文件上传器的一部分。我不太习惯 Angular，所以我在他们的文档及其难以阅读或理解的示例中挣扎......希望提前提供帮助和感谢！

Answer 1

问题是您没有像当前值和最大值那样将当前 mb 和最大 mb 传递给进度指令。在启动函数中设置属性。将这些属性添加到进度指令中。然后更新模板以使用这些更新的属性。(我稍微更改了它们的名称，使其更容易绑定(

在上传控制器中：

$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>