Angular TypeError: name.replace is not a function for ng-style

Question

我是 angular 的新手，在控制台 TypeError: name.replace is not a function 中不断收到以下错误。我不确定到底是什么原因造成的，但它似乎是由 ng-style 语句引起的，也许与驼峰式大小写有关？

我不明白的部分是为什么 ng-style="isFrontView() || !matches && {'display': 'none'}" 会抛出错误，而 ng-style="!isFrontView() || !matches && {'display': 'none'}" 不会抛出错误。

为了补救这种情况，我尝试从函数名称中删除驼峰式命名并全部改为小写。我也尝试使用 !!isFrontView()，但似乎都没有删除错误消息。

有人知道此错误消息的原因和可能的修复方法吗？

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。即使出现控制台错误，一切仍能正常运行。

Answer 1

您的潜在问题是由于 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) 和 boolean 没有 replace 属性（在 string 对象上可用）因此它失败了。您可以通过使用字符串连接将表达式转换为字符串来对此进行测试。

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

查看隐藏和显示元素所需的所有表达式，您可以使用 ng-show/ng-hide 指令来实现。

Answer 2

这是一个迟到的答案，但我可能会帮助其他有同样问题的人，比如 me.In 我的情况错误是 a.replace 不是函数最后我找到了原因。这是由于 ng-style 而发生的，表达式是 data-ng-style="isCompare==true ? {'max-height':'423'} : ***' '*** .... 单个 qoutes 之间的 space 导致 error.After 删除 space 错误消失了。

Answer 3

如果表达式评估的 return 类型错误，就会发生这种情况。

评估的表达式：

ng-style="$vm.getStyles()"

必须return一个对象文字：

return { order: -1 };

Angular TypeError: name.replace is not a function for ng-style

Angular TypeError: name.replace is not a function for ng-style

angularjs

ng-style