AngularJS:缩小后指令中无法访问的范围

时间:2015-07-14 14:02:58

标签: javascript angularjs minify angular-directive

在指令中的链接函数中访问范围是" undefined"在缩小了一些例子之后(使用Closure Compiler),但在预缩小的情况下工作正常。

例如,Angular教程下面的代码有一些改动。缩小后,指令不会在任何时候获取$ scope.format。该指令显示默认格式(2015年7月15日),没有任何错误。在缩小之前,该指令显示$ scope.format(2015年7月15日上午12:09:04)中定义的格式。

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 个答案:

答案 0 :(得分:2)

您使用的是Closure编译器的高级编译模式吗?如果没有看到你的缩小代码,很难确定问题,但这里有一些想法:

  1. 在您的代码的这一部分:

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

    $scope.format可能会重命名为s.f。通常情况下,这不会成为问题,特别是因为$scope被正确注入。但是,您引用了HTML中的format属性,Closure编译器并不知道:

    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' - Closure编译器永远不会更改字符串,因此这应该导出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。

  3. 同样,这些只是目前的想法。如果您将缩小的代码作为完整示例发布,我们将能够提供更多帮助。