AngularJs - Angularコントローラでビジネスロジックを実行する前にHTMLを待つ方法

Question

私はリソースを呼び出し、その結果を変数に格納する角度コントローラを持っています。

私のHTMLでは、その変数のオブジェクトを巡って、ng-repeatを使っていくつかのHTML要素をレンダリングしています。

私が抱えている問題は、それぞれのHTML要素がレンダリングされているので、その要素を取得することに関連する関数を呼び出す必要があるということです。

このJS関数を呼び出す時点で、要素はまだレンダリングされていません。

これはコントローラコードです。

cmsUserResource.GetOpCoUsersViewModel($routeParams.id.split("-")[1]).then(
    function (response) { 

    vm.response = response; 

    //This works because the HTML for this element is not generated dynamically 
    Sortable.create(document.getElementById('advanced-1'), { 
     sort: true, 
     group: sortableOptions, 
     animation: 200, 
     onStart: function() { 
     angular.element(document.getElementById('opCoUsersForm')).scope().opCoUsersForm.$dirty = true; 
     } 

    }); 


    vm.response.brands.forEach(function (brand) { 
     //This DOES NOT work, the elements are not on the page yet. 

     Sortable.create(document.getElementById('brand-' + brand.id), { 
     sort: true, 
     group: sortableOptions, 
     animation: 200, 
     onStart: function() { 
      angular.element(document.getElementById('opCoUsersForm')).scope().opCoUsersForm.$dirty = true; 
     } 

     }); 
    }); 
    }); 

これは、どのように私は呼び出す前にHTMLを待つために、角度強制んHTMLコード

<div class="block__list"> 
    <div> 
    <div class="formDefinitionPositionTitle">CMS Users in {{vm.response.opCo.companyName}} </div> 
    <ul id="advanced-1" class="block__list_tags handle"> 
     <li umbracoUserId="{{cmsUser.cmsUserId}}" ng-repeat="cmsUser in vm.response.cmsUsers">{{cmsUser.cmsUserName}}</li> 
    </ul> 
    </div> 
</div> 

<h3>Users In Brands</h3> 
<div ng-repeat="brand in vm.response.brands"> 
    <div class="block__list"> 
    <div> 
     <div class="formDefinitionPositionTitle">CMS Users in {{brand.brandName}} </div> 
     <ul id="brand-{{brand.id}}" class="block__list_tags handle"> 
     <li umbracoUserId="{{cmsUser.cmsUserId}}" ng-repeat="cmsUser in brand.cmsUsers">{{cmsUser.cmsUserName}}</li> 
     </ul> 
    </div> 
    </div> 
    <br /><br /> 
</div> 

です：

Sortable.create(document.getElementById('brand-' + brand.id), 

Answer 1

あなたはライフサイクルフック（を見てする必要がありますhttps://angular.io/guide/lifecycle-hooks）。角度付き

、あなたは「完全にを初期化されているコンポーネントのビュー後」あなたには、いくつかのコードを実行できるようになるAfterViewInitを使用します。

だから、あなたは、このドキュメントからフック$ポストリンク（だろうAngularJSの等価）を見つける必要がある：https://docs.angularjs.org/guide/component