我正在使用AngularJS开发一个Web应用程序。我有一个从哪里出现的错误,它工作正常,我真的不知道为什么它不再起作用了。
所以它在指令中,我尝试在指令html模板中设置元素的属性offsetWidth
。由于我真的不知道它可能来自何处,因此我将为您提供指令和模板的完整代码。该指令创建一个应用程序按钮,并在单击时处理其视觉效果。触发错误的是$element[0].offsetWidth = $element[0].offsetWidth;
行。 (这是重新启动动画的技巧)
我再次重复,,此代码可以正常工作,我几乎可以确定我没有进行任何更改。我正在使用Chrome进行调试,也许它来自它?
错误:Uncaught TypeError: Cannot set property offsetWidth of #<HTMLElement> which has only a getter
指示:
'use strict';
XVMApp.directive('appButton', ['$location', function($location){
return {
restrict: 'E',
replace: true,
scope: {
img: '@',
fillPercent: '@?',
target: '@?'
},
link: function ($scope, $element) {
// Image percentage fill button
if($scope.fillPercent === undefined) $scope.fillPercent = '100';
// Click event
$element.on('click', function() {
// Url target
if($scope.target !== undefined){
$scope.$apply(function() {
$location.path($scope.target);
});
}
// Click effect
$element[0].preventDefault;
$element[0].classList.remove('app-button-click-effect');
$element[0].offsetWidth = $element[0].offsetWidth;
$element[0].classList.add('app-button-click-effect');
});
},
templateUrl: 'src/directive/appButton/app-button.html'
};
}]);
模板:
<div class="app-button"
style="background-size: {{fillPercent}}%; ">
<div style="
background-image: url('src/assets/img/{{img}}');
background-repeat: no-repeat;
background-position: center;
background-size: {{fillPercent}}%;
height: 100%;
width: 100%; ">
</div>
</div>
最佳答案
我猜您最近更新到了Chrome43。我刚刚遇到了相同的问题。看起来最新版本将dom节点更像是标准js类,并且任何只读属性现在都将引发js错误。设置offsetWidth永远不会起作用,因为它是一个只读属性,但是以前Chrome只会默默地忽略它,而现在,如果您使用严格模式,则会抛出此错误。有关详细信息,请参见此处:http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype
关于javascript - 未捕获的TypeError : Cannot set property offsetWidth of#<HTMLElement> which has only a getter,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30453078/