AngularJS動的にディレクティブを追加する

Question

DOMにディレクティブを動的に追加するには、$ compileサービスを使用する必要があります。 これまでのところとても良いですが、この問題に関する私の研究を通して、私は相違を見て問題を分離するために同様のケースを見つけることができませんでした。

完全なコードはここで見ることができます： https://plnkr.co/edit/UkncNEGZDFNyamlBgeSI?p=preview

uが見ることができるように、「UploadController」から$スコープデータは「ProgressDialog」ディレクティブに正しく適用されていないようです。割合を除いて、現在のMBと最大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>