11

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

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

为了纠正这种情况，我尝试从函数名中删除 camelCase 并全部小写。我也尝试使用!!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;
};

PS 即使出现控制台错误，一切仍然正常。

4

3 回答 3

15

您的潜在问题是由于ng-style. ng-style设置表达式的观察者并在jquery/jqlite 的帮助下element.css设置元素的样式。并且内部element.csscss 属性 ( name) 被转换为标准驼峰大小写（使用正则表达式字符串替换）。在您的特定情况下，表达式评估为 boolean ( true) 而不是对象（ng-style对每个属性都执行此操作）并且boolean没有属性（在字符串replace对象上可用），因此它失败了。您可以通过使用字符串连接将表达式转换为字符串来测试这一点。

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

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

于 2015-07-21T21:20:21.420 回答
1

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

表达式评估：

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

必须返回一个对象字面量：

return { order: -1 };
于 2017-08-29T20:36:41.063 回答
0

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

于 2016-06-10T07:58:51.837 回答