Angular TypeError:name.replace不是ng-style的函数 [英] Angular TypeError: name.replace is not a function for ng-style

问题描述

我是Angle的新手，并在控制台TypeError: name.replace is not a function中不断收到以下错误.我不确定到底是什么引起的，但是它似乎是由ng-style语句引起的，也许与camelCase有关?

I'm new to angular and keep getting the following error in the console TypeError: name.replace is not a function. I'm not sure what's exactly causing it, but it seems to be caused by the ng-style statement and maybe something to do with the camelCase?

我不了解的部分是为什么ng-style="isFrontView() || !matches && {'display': 'none'}"会引发错误，而ng-style="!isFrontView() || !matches && {'display': 'none'}"不会引发错误.

The part I don't understand is why ng-style="isFrontView() || !matches && {'display': 'none'}" throws the error, but ng-style="!isFrontView() || !matches && {'display': 'none'}" doesn't throw the error.

为了解决这种情况，我尝试从函数名称中删除camelCase并全部小写.我也尝试使用!!isFrontView()，但似乎都没有删除错误消息.

In an attempt to remedy the situation I tried removing the camelCase from the function name and went all lowercase. I also attempted to use !!isFrontView(), but neither seemed to remove the error message.

有人知道此错误消息是什么原因以及可能的解决方法吗?

Do anyone know what is the cause of this error message and a potential fix?

HTML模板:

<div class="system-view">
    <div class="controller-container fill" id="systemView1" ng-style="isFrontView() || !matches && {'display': 'none'}">
        <canvas id="canvasLayer-shell" data-layername="front" width="617" height="427"></canvas>
        <i ng-if="!matches" class="fa fa-repeat toggle-view" ng-click="changeView()" ng-touch="changeView()"></i>
    </div>
    <div class="controller-container fill" id="systemView2" ng-style="!isFrontView() || !matches && {'display': 'none'}">
        <canvas id="canvasLayer-shell" data-layername="back" width="617" height="427"></canvas>
        <i ng-if="!matches" class="fa fa-undo toggle-view" ng-click="changeView()" ng-touch="changeView()"></i>
    </div>
</div>

后端代码:

$scope.frontView = true;
$scope.matches = true;

$scope.isFrontView = function() {
   return $scope.frontView;
};

$scope.changeView = function() {
    $scope.frontView = !$scope.frontView;
};

P.S.即使出现控制台错误，一切仍然可以正常运行.

P.S. Even with the console error everything still functions normally.

推荐答案

您的潜在问题是由于ng-style的使用不正确造成的. ng-style在表达式上设置观察者并在以下元素的帮助下设置元素的样式jquery/jqlite element.css .然后将内部element.css css属性(name)转换为标准骆驼套(

Your potential issue is due to the incorrect usage of ng-style. ng-style sets a watcher on the expression and sets the element's style with the help of jquery/jqlite element.css. And Inside element.css css attribute (name) is converted to the standard camel casing (which uses regex string replace). In your specific case the expression evaluated to boolean (true) instead of an object (ng-style does this for each property) and boolean does not have replace property (which is available on a string object) and hence it fails. You can test this by converting your expression to evaluate to a string by using string concatenation.

即ng-style="'' + (isFrontView() || !matches && {'display': 'none'})"

查看隐藏和显示元素所需的所有表达式，您可以很好地利用

Looking at the expression all you need it to hide and show the element, you could well make use of ng-show/ng-hide directives to achieve that.

这篇关于Angular TypeError:name.replace不是ng-style的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！