javascript - 在 Angular 中，如何从指令访问我编译的模板？

Question

我有这样的指令

return {
  scope:{
    divid: '@'
  },
  template: '<div id="{{divid}}"></div>'
}

像这样的例子

<direct divid="some-id"></direct>

我想在知道模板已经编译并且 id 设置为“some-id”后运行一些 javascript。我尝试了 Controller 、前置和后置链接功能，但如果我在其中设置断点，我可以看到在所有情况下 id 仍然等于 '{{divid}}'。有没有办法做到这一点？我知道我可以通过编译和链接函数访问模板元素，但如果可以的话，我想避免这种情况，因为它使我的代码更加简洁和可读。

Answer 1

您可以将那段代码包装在链接函数中的 $timeout 中，它将确保您的元素完全呈现，因为 $timeout 仅在当前摘要周期完成后运行(如果您已经在当前摘要周期之前设置了 id)。 如果您没有在超时内执行任何范围更新，请记住使用第三个参数(设置为 false)来关闭摘要循环运行。

如果您不确定 id 何时设置，尤其是异步设置时(即 divid="{{someId}}" 和 someId 是异步填充的)。

然后还有一个名为 $$postDigest 的范围的非标准私有(private)属性，因为它是内部属性实现，可以在任何 future 版本中更改，因此使用它需要您自担风险。

angular.module('app', []).directive('direct', function($timeout) {
  return {
    scope: {
      divid: '@'
    },
    restrict: 'EA',
    template: '<div id="{{divid}}"></div>',
    link: function(scope, element) {
      console.log('Before digest-->', element.find('div').attr('id'));
      //using timeout
      $timeout(function() {
        console.log('In timeout-->', element.find('div').attr('id'));
      }, false);
      //Using non standard postdigest
      scope.$$postDigest(function() {
        console.log('In postdigest-->', element.find('div').attr('id'));
      });

      //Setting up a onetime watch
      var unWatch = scope.$watch(function() {
        return element.find('div').attr('id');
      }, function(val) {
        if (val) {
          unWatch();
          console.log('One time watch-->', element.find('div').attr('id'), val);
        }
      })
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app">
  <direct divid="someid"></direct>
  Nothing much here, See the console
</div>