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