如何在指令中重新呈现部分html?

时间:2017-07-19 20:26:01

标签: javascript html angularjs

我有这样的情况:

我的指令删除一些html块并存储它。 这是链接功能:

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块的这一部分,或至少整个ng-repeat块更新值?

1 个答案:

答案 0 :(得分:1)

为什么不将这个项目传递到你的指令并让指令的模板输出你想要的东西呢?

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

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

你的指令的一部分是:

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

您还可以在此处访问item中的任何其他属性,并将其返回到视图中。