AngularJs - 如何在 Angular 控制器中运行业务逻辑之前等待 HTML

Question

我有一个角度控制器，它调用资源，然后将结果放入变量中。

然后在我的 HTML 中，我将遍历该变量中的对象并使用 ng-repeat 呈现一些 HTML 元素。

我遇到的问题是，对于要呈现的每个 HTML 元素，我需要调用一个函数，该函数涉及通过它的 id 获取元素。

当我调用这个 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 代码

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

那么我如何强制 Angular 在调用之前等待 HTML：

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

Answer 1

您需要查看 AngularJS 的生命周期钩子 (https://angular.io/guide/lifecycle-hooks)。

使用 Angular，您可以使用 AfterViewInit，它允许您在“组件的视图完全初始化后”执行一些代码。

所以你需要找到 AngularJS 的等价物，这将是本文档中的钩子 $postLink()：https://docs.angularjs.org/guide/component