Question

我有一个像这样的指令

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

和像这样的实例

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

我想在我知道模板已经编译并且id设置为＆＃39; some-id＆＃39;之后运行一些javascript。我尝试了一个控制器，前后链接功能，但是如果我在其中设置一个断点，我可以看到该ID仍然等于＆＃39; {{divid}}＆＃39;在所有情况下。反正有没有这样做？我知道我可以通过编译和链接函数访问模板元素但是如果可以的话我想避免这种情况，因为它使我的代码更加简洁和可读。

Answer 1

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

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

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

＆＃13;

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);
        }
      })
    }
  }
})

＆＃13;

<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>

＆＃13;

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

1 个答案: