javascript - 如何在指令中重新渲染部分html？

Question

我有这样的情况:

我的指令删除一些 html block 并存储它。这是链接函数:

function link(scope, element, attrs) {
  var storedHtml = angular.copy(angular.element(el)[0].innerHTML);
  angular.element(el)[0].innerHTML = '';

  $timeout(function() {
    angular.element(el)[0].innerHTML = storedHtml;
    scope.$apply();

  }, 5000);
}

我在 ng-repeat 中使用我的指令:

<ul>
  <li ng-repeat="item in data">
    <div my-directive>
      <p>{{item.name}} </p>
    </div>
  </li>
</ul>

所以storedHtml可能是这样的:

<p>{{item.name}}</p>

是否有可能重新渲染 html block 的这一部分，或者至少重新渲染整个 ng-repeat block 来更新值？

Answer 1

与其这样做，为什么不直接将项目传递到您的指令中并让指令的模板输出您想要的内容？

<ul>
  <li ng-repeat="item in data">
    <div my-directive data="item"></div>
  </li>
</ul>

然后在您的指令中，您可以使用isolate范围访问item(还有其他指令范围方法也可以使用，但我更喜欢isolate)。

您的指令的一部分是:

scope: {
    data: '='
},
template: '<p>{{ data.name }}</p>'

您还可以从此处的 item 访问任何其他属性并将它们返回到 View 。