Question

要将指令动态添加到DOM中，必须使用$ compile服务。到目前为止一直很好，但在我对这个问题的研究中，我找不到类似的案例来看待差异并找出问题。

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

正如您所见，来自＆＃39; UploadController＆＃39;的$ scope数据似乎无法正确应用于“ProgressDialog”＃39;指示。除了比例，它只是不会显示当前和最大MB。

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

此代码示例不在上下文中。它是带有Socket.io和NodeJS的File Uploader的一部分。我对Angular的习惯并不多，所以我很难用他们的文档和难以理解的例子来理解这些例子......希望能提前得到帮助和谢谢！

Answer 1

问题是您没有将当前的mb和max mb传递给progress指令，就像当前值和最大值一样。在startUp函数中设置属性。将这些属性添加到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>

AngularJS动态添加指令

1 个答案: