gpt4 book ai didi

javascript - Angular : Scope inaccessible in directive after minification

转载 作者:行者123 更新时间:2023-11-29 21:45:23 26 4
gpt4 key购买 nike

在对许多示例(使用 Closure Compiler)进行缩小后,指令内链接函数中的访问范围是“未定义的”,但在缩小前工作正常。

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

应用程序.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>

最佳答案

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

  1. 在这部分代码中:

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

    $scope.format 可能会重命名为类似 s.f 的名称。通常,这不是问题,特别是因为 $scope 被正确注入(inject)。但是,您在 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 正确匹配。

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

关于javascript - Angular : Scope inaccessible in directive after minification,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31408927/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com