AngularJS动态添加指令

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

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

就像你看到的，从“UploadController”的$范围的数据似乎并不正确地应用到“ProgressDialog”指令。除了比例之外，它不会显示当前和最大MB。

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

此代码示例不在上下文中。它是带有Socket.io和NodeJS的File Uploader的一部分。我对Angular并不习惯，所以我为他们的文档，难以阅读和理解的例子而奋斗......希望提前帮助和感谢！

来源

2017-04-13 Reijo

问题是，您没有将当前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>

来源

2017-04-13 01:13:08 floor

这解决了它！我实际上在发布之前尝试了这个解决方案，但我想我拼错了max-mb和max-MB – Reijo

AngularJS动态添加指令

回答

相关问题