AngularJS - 如何从链接函数访问隔离范围？

Question

考虑以下指令示例:(Live Demo)

app.directive('phone', function() {
  return {
    restrict: 'E',
    scope: {
      tel: '@'
    }, 
    template: '<div>{{tel}}</div>',
    link: function(scope, element, attrs) {
      console.log(scope.tel);   // undefined
    }
  };
});  

这样使用:

<phone tel="1234"></phone>

tel 在模板中是可访问的，但在链接函数中它是undefined。为什么？我如何从链接函数访问隔离范围？

Answer 1

在链接函数完成之前它不会被插值(我不确定这是为什么)，但你有几个选择:

app.directive('phone', function($timeout, $interpolate) {
  return {
    restrict: 'E',
    scope: {
      tel: '@'
    }, 
    template: '<div>{{tel}}</div>',
    link: function(scope, element, attrs) {

      //Use $timeout service with no delay:
      $timeout(function(){
        console.log(scope.tel);   // 1234
      });

      //Use $watch - will get called every time the value changes:
      scope.$watch('tel',function(tel){
        console.log(scope.tel);   // 1234
      });

      //You can even use the $intrapolate service, this is basically what `@` does:
      console.log($interpolate(element.attr('tel'))(scope.$parent));

      // in your example tel isn't an expression but a constant so you could also do this:
      console.log(attrs.tel); // 1234
    }
  };
});