angularjs - Angular TypeError : name. 替换不是 ng 风格的函数

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;
};

附注即使出现控制台错误，一切仍然正常运行。

Answer 1

您的潜在问题是由于 ng-style 使用不正确造成的。 ng-style sets a watcher on the expression并设置element's style with the help of jquery/jqlite element.css 。并且 element.css 内的 css 属性 (name) 被转换为标准驼峰式大小写 ( which uses regex string replace )。在您的特定情况下，表达式计算为 bool 值 (true) 而不是对象 ( ng-style does this for each property )，并且 boolean 不具有 replace 属性 (它在 string 对象上可用)，因此失败。您可以通过使用字符串连接将表达式转换为字符串来测试这一点。

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

查看表达式，您需要它来隐藏和显示元素，您可以很好地利用 ng-show/ng-hide指令来实现这一目标。