web-dev-qa-db-ja.com

Angular TypeError：name.replaceはngスタイルの関数ではありません

私はangularに不慣れで、コンソールTypeError: name.replace is not a functionで次のエラーが発生し続けます。正確な原因はわかりませんが、ng-styleステートメントが原因のようです。キャメルケースとは？

私が理解していない部分は、ng-style="isFrontView() || !matches && {'display': 'none'}"がエラーをスローする理由ですが、ng-style="!isFrontView() || !matches && {'display': 'none'}"はエラーをスローしません。

この状況を改善するために、関数名からキャメルケースを削除して、すべて小文字にしました。また、!!isFrontView()を使用しようとしましたが、どちらもエラーメッセージを削除していないようです。

このエラーメッセージの原因と潜在的な修正を誰かが知っていますか？

Error Message

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.コンソールエラーがあっても、すべてが正常に機能します。

angularjsng-style
10
Steven10172

潜在的な問題は、_ng-style_の誤った使用法が原因です。 _ng-style_は式にウォッチャーを設定します そして jquery/jqlite _element.css_ の助けを借りて要素のスタイルを設定します。そして、内部_element.css_ css属性（name）は、標準のキャメルケースに変換されます（ 正規表現文字列置換を使用 ）。特定のケースでは、式はオブジェクトではなくブール値（true）に評価されます（ _ng-style_は各プロパティに対してこれを行います ）およびブール値にはreplaceプロパティ（stringオブジェクトで使用可能）がないため、失敗します。文字列連結を使用して、評価する式を文字列に変換することで、これをテストできます。

つまり、ng-style="'' + (isFrontView() || !matches && {'display': 'none'})"

要素を表示および非表示にするために必要なすべての式を見ると、 _ng-show_/_ng-hide_ ディレクティブを使用してそれを実現できます。

13
PSL

これは、評価された式が間違った型を返す場合に発生する可能性があります。

評価された式：

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

オブジェクトリテラルを返す必要があります：

return { order: -1 };
1
Phaedrus

これは遅い答えですが、私のような同じ問題を抱えている他の人を助けるかもしれません。私の場合、エラーはa.replaceは関数ではありませんであり、最終的に理由を見つけました。 ng-styleが原因で発生しており、単一のqoutes間のスペースがエラーの原因であるという式はdata-ng-style="isCompare==true ? {'max-height':'423'} : ***' '*** ....でした。スペースを削除すると、エラーはなくなりました。

0
katmanco