Angular TypeError: name.replace не является функцией для стиля ng

Question

Я новичок в 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 Даже с ошибкой консоли все по-прежнему функционирует нормально.

Answer 1

Ваша потенциальная проблема связана с неправильным использованием ng-style, ng-style устанавливает наблюдателя для выражения и устанавливает стиль элемента с помощью jquery/jqliteelement.css, И внутри element.css атрибут css (name) преобразуется в стандартный верблюжий корпус (в котором используется замена строки регулярного выражения). В вашем конкретном случае выражение оценивается как логическое (true) вместо объекта (ng-style делает это для каждого свойства) и не имеет логическое значение replace свойство (которое доступно на строковом объекте) и, следовательно, оно терпит неудачу. Вы можете проверить это, преобразовав выражение для оценки в строку, используя конкатенацию строк.

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

Глядя на выражение все, что вам нужно, чтобы скрыть и показать элемент, вы могли бы использовать ng-show /ng-hide директивы для достижения этого.

Answer 2

Это может произойти, если вычисленное выражение возвращает неправильный тип.

Выражение оценивается:

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

должен вернуть литерал объекта:

return { order: -1 };

Answer 3

Это поздний ответ, но я мог бы помочь другим, у которых есть такая же проблема, как у меня. В моем случае ошибка: a.replace не является функцией, и, наконец, я нашел причину. Это происходило из-за стиля нг и выражение было data-ng-style="isCompare==true ? {'max-height':'423'} : ***' '*** .... этот пробел между одиночными qoutes вызвал ошибку. После удаления пробела ошибка исчезла.