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

Question

我有一个这样的指令

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

像这样的例子

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

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

Answer 1

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

如果您不确定何时设置 id，尤其是异步设置时（即异步填充 divid="{{someId}}" 和 someId），您也可以使用一次性监视。

然后还有一个名为 $$postDigest 的非标准私有属性范围，因为它是内部属性实现可以在任何未来版本中更改，所以使用这个风险自负。

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>

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

In Angular how can I access my compiled template from a directive?

javascript

angularjs

dom

angularjs-scope