Угловые поля директивы не требуют скобок

Question

Я использую функцию datepicker для пользовательского интерфейса UI Bootstrap, и я хотел бы получить одно из значений, переданных в атрибут.

// JS 
$scope.myMaxDate = new Date(); 

<!-- HTML --> 
<input datepicker-popup="MM/dd/yyyy" max-date="myMaxDate" /> 

Я не понимаю, почему в этом случае max-date атр принимает строку, а не выражение, как {{myMaxDate}}. Как он получает реальную ценность?

Более того, я использую декоратор для изменения некоторых данных из этой директивы и хотел бы получить доступ к этому атрибуту, но все, что я получаю, это строка myMaxDate.

$provide.decorator("datepickerPopupDirective", ["$delegate", function($delegate) { 
     // get references to the directive and old link function 
     var directive = $delegate[0]; 
     var link = directive.link; 

     // create a new link function using compile 
     directive.compile = function() { 
      // the new link function we want to return 
      return function(scope, element, attrs, ngModelCtrl) { 
       console.log(attrs.maxDate); // 'myMaxDate' 

       // invoke the old link function 
       link.apply(this, arguments); 
      }; 
     }; 

Answer 1

Чтобы ответить на ваш вопрос о том, как datepicker-popup директива находит фактическое значение атрибута max-date, он, скорее всего, использует $eval метод scope.

Так что в вашем коде, чтобы увидеть фактическое использование значения:

console.log(scope.$eval(attrs.maxDate)); 

Это также объясняет, почему директива не требует двойных фигурных скобок. Фактически двойные фигурные скобки вызовут проблемы, потому что он преобразует ваш объект myMaxDate в строку и, следовательно, потеряет методы объекта Date.

Для получения дополнительной информации о $eval метода взгляд на AngularJS Scope API

Answer 2

Для начала вы compile временной отмены в полном объеме. Это создало бы потенциальные проблемы.

$provide.decorator("datepickerPopupDirective", ["$delegate", function($delegate) { 
     // get references to the directive and old link function 
     var directive = $delegate[0]; 
     var compile = directive.compile; 

     directive.compile = function() { 

      var link = compile.apply(this, arguments); 

      // the new link function we want to return 
      return function(scope, element, attrs, ngModelCtrl) { 
       console.log(attrs.maxDate); // 'myMaxDate' 

       // invoke the old link function 
       link.apply(this, arguments); 
      }; 
     }; 

....