Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/ssl/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript AngularJS:缩小后指令中无法访问范围_Javascript_Angularjs_Minify_Angular Directive - Fatal编程技术网

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

Javascript AngularJS:缩小后指令中无法访问范围,javascript,angularjs,minify,angular-directive,Javascript,Angularjs,Minify,Angular Directive,在对许多示例进行缩小(使用闭包编译器)之后,访问指令中链接函数的作用域是“未定义”的,但在进行缩小之前效果很好 例如,下面的代码来自角度教程,有一些改动。缩小后,指令在任何时候都不会拾取$scope.format。该指令显示默认格式(2015年7月15日),没有任何错误。缩小之前,指令显示$scope.format(7/15/2015 12:09:04 AM)中定义的格式 app.js .controller('Controller', ['$scope', function ($scope)

在对许多示例进行缩小(使用闭包编译器)之后,访问指令中链接函数的作用域是“未定义”的,但在进行缩小之前效果很好

例如,下面的代码来自角度教程,有一些改动。缩小后,指令在任何时候都不会拾取$scope.format。该指令显示默认格式(2015年7月15日),没有任何错误。缩小之前,指令显示$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>

日期格式:
当前时间为:
是否使用闭包编译器的高级编译模式?如果看不到缩小的代码,很难找出问题所在,但以下是一些想法:

  • 在代码的这一部分中:

    .controller('Controller', ['$scope', function ($scope) {
      $scope.format = 'M/d/yy h:mm:ss a';
    }])
    
    $scope.format
    可能会重命名为类似于
    s.f
    的名称。通常,这不会是一个问题,特别是因为
    $scope
    被正确地注入。但是,您在HTML中引用了
    format
    属性,闭包编译器不知道该属性:

    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导出正确的属性名称。现在,记住-

  • 与#1类似,
    attrs.myCurrentTime
    可能被重命名为类似于
    a.m
    。尝试使用字符串属性名(
    attrs['myCurrentTime']
    ),以确保编译的JavaScript与HTML正确匹配


  • 再说一次,在这一点上,这些只是想法。如果您将缩小代码作为完整示例发布,我们将能够提供更多帮助。

    您能为缩小和非缩小变体提供plunkr吗?您使用什么库进行缩小?@tomepejo第一句话,他使用的是谷歌的闭包编译器。@Agop,我想是高级模式,谷歌的闭包编译器不能将
    $scope.format
    缩小为
    $scope.f
    ,而是将其删除,因为它没有在function@Grundy是的,那也有可能。这就是为什么我们需要看到缩小的代码。无论哪种方式,使用字符串导出都会有所帮助,这是基于到目前为止我们必须处理的内容。非常感谢您的帮助。现在这更有意义了。想法1没有什么区别(因为缩小的代码中仍然有x.format)。然而,idea 2解决了这个问题,并且在我正在编写的更复杂的应用程序中也解决了这个问题。干杯