Angular TypeError:name.replace不是ng-style的函数

Question

我是角色的新手,并在控制台中不断收到以下错误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即使控制台出错,一切仍然正常.

Answer 1

您的潜在问题是由于使用不当造成的ng-style.ng-style在表达式上设置一个观察者,并在jquery/jqlite的帮助下element.css设置元素的样式.并且里面的element.csscss属性(name)被转换为标准的camel大小写(使用正则表达式字符串替换).在您的特定情况下,表达式计算为boolean(true)而不是对象(ng-style对每个属性执行此操作)和布尔值没有replace属性(在字符串对象上可用),因此它失败.您可以通过使用字符串连接将表达式转换为求值来测试此值.

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

查看表达式所有你需要它来隐藏和显示元素,你可以使用ng-show/ng-hide指令来实现它.