0

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

然后在我的 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),
4

1 回答 1

0

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

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

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

于 2017-11-08T17:56:52.493 回答