2015-07-14 2 views
2

Доступ к области видимости в функции ссылок в директиве «неопределен» после миниатюризации для ряда примеров (с использованием Closure Compiler), но отлично подходит для предварительной оценки.AngularJS: Масштаб недоступен в директиве после минимизации

Например, код из Углового учебника с некоторыми изменениями. После минимизации $ scope.format не подбирается директивой в любой момент. Директива показывает формат по умолчанию (15 июля 2015 г.) без каких-либо ошибок. Перед минимизацией директива отображает формат, определенный в $ scope.format (7/15/2015 12:09:04 AM).

app.js

.controller('Controller', ['$scope', function ($scope) { 
    $scope.format = 'M/d/yy h:mm:ss a'; 
}]) 
.directive('myCurrentTime', bd.myCurrentTime.Directive.factory) 

myCurrentTime-directive.js

'use strict'; 

goog.provide('bd.myCurrentTime.Directive.factory'); 

/** 
* Example directive factory. 
* 
* @return {Object} 
* @ngInject 
* @export 
*/ 
bd.myCurrentTime.Directive.factory = function ($interval, dateFilter) { 
    function link(scope, element, attrs) { 
     var format, 
     timeoutId; 

     function updateTime() { 
      element.text(dateFilter(new Date(), format)); 
     } 

     scope.$watch(attrs.myCurrentTime, function (value) { 
      format = value; 
      updateTime(); 
     }); 

     element.on('$destroy', function() { 
      $interval.cancel(timeoutId); 
     }); 

     // start the UI update process; save the timeoutId for canceling 
     timeoutId = $interval(function() { 
      updateTime(); // update DOM 
     }, 1000); 
    } 

    return { 
     link: link 
    }; 
}; 
// Added by ng-annotate 
bd.myCurrentTime.Directive.factory.$inject = ["$interval", "dateFilter"]; 

HTML файл:

<div ng-controller="Controller"> 
    Date format: <input ng-model="format"> <hr /> 
    Current time is: <span my-current-time="format"></span> 
</div> 
+1

Вы можете предоставить plunkr для мини-и неминифицированного варианта? – Grundy

+0

Какую библиотеку вы используете для минимизации? – tomepejo

+0

@tomepejo Первое предложение, он использует компилятор Google Closure. – Agop

ответ

2

Вы используете режим Advanced Compilation Замыкание компилятора? Не видя ваш Минимизированный код, трудно точно определить проблему, но вот некоторые идеи:

  1. В этой части кода:

    .controller('Controller', ['$scope', function ($scope) { 
        $scope.format = 'M/d/yy h:mm:ss a'; 
    }]) 
    

    $scope.format может быть переименована в нечто вроде s.f. Обычно это не проблема, тем более, что $scope вводится должным образом. Тем не менее, вы ссылки на format свойство в HTML, который Замыкание компилятор не знает о:

    Date format: <input ng-model="format"> <hr /> 
    Current time is: <span my-current-time="format"></span> 
    

    Попробуйте использовать $scope['format'] = 'M/d/yy h:mm:ss a' вместо - Замыкание компилятор не изменяет строки, так что это должно экспортировать правильное имя свойства для HTML. Теперь помните - once you use a string to access a property, always use a string to access that property.

  2. Как и # 1, attrs.myCurrentTime может быть переименован в нечто вроде a.m. Попробуйте использовать имя свойства строки (attrs['myCurrentTime']), чтобы убедиться, что скомпилированный JavaScript соответствует HTML правильно.

Опять же, это только идеи на данном этапе. Если вы разместите мини-код в качестве полного примера, мы сможем помочь больше.

+0

Большое спасибо за это. Теперь это имеет гораздо больший смысл. Идея 1 не имеет никакого значения (поскольку в минифицированном коде все еще есть x.format). Однако идея 2 устранила проблему, а также устранила проблему в более сложном приложении, которое я пишу. Ура! – mattrix

Смежные вопросы