Angular TypeError: name.replace is not a function for ng-style

Question

I'm new to angular and keep getting the following error in the console TypeError: name.replace is not a function. I'm not sure what's exactly causing it, but it seems to be caused by the ng-style statement and maybe something to do with the camelCase?

The part I don't understand is why ng-style="isFrontView() || !matches && {'display': 'none'}" throws the error, but ng-style="!isFrontView() || !matches && {'display': 'none'}" doesn't throw the error.

In an attempt to remedy the situation I tried removing the camelCase from the function name and went all lowercase. I also attempted to use !!isFrontView(), but neither seemed to remove the error message.

Do anyone know what is the cause of this error message and a potential fix?

HTML Template:

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

Backend Code:

$scope.frontView = true;
$scope.matches = true;

$scope.isFrontView = function() {
   return $scope.frontView;
};

$scope.changeView = function() {
    $scope.frontView = !$scope.frontView;
};

P.S. Even with the console error everything still functions normally.

Congresswoman

Side note: Why dont you just use ng-show/ng-hide nstead of ng-style expression to hide the element. – Landslide

@Landslide The application is currently setup to draw to both canvas' so they must stay in the DOM. – Congresswoman

If you use ng-show/ng-hide. they will stay in DOM, unlike ng-if. – Landslide

@Landslide Thanks for the clarification. I will use ng-hide/ng-show. But, I'm still curious as to what's causing the error above and why !isFrontView() works. Will be helpful to know if I have to apply a dynamic style. – Congresswoman

Issue is ofcourse becaue the value of the ng-style attr will be boolean in stead of string eg true. and it internally calls jqlite element.css with boolean in stead of string and boolean does not have replace function. It is for string. You could do '' + (isFrontView() || !matches && {'display': 'none'}) as well – Landslide

@Landslide Thanks. Makes perfect sense. – Congresswoman

Answer 1

Your potential issue is due to the incorrect usage of ng-style. ng-style sets a watcher on the expression and sets the element's style with the help of jquery/jqlite element.css. And Inside element.css css attribute (name) is converted to the standard camel casing (which uses regex string replace). In your specific case the expression evaluated to boolean (true) instead of an object (ng-style does this for each property) and boolean does not have replace property (which is available on a string object) and hence it fails. You can test this by converting your expression to evaluate to a string by using string concatenation.

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

Looking at the expression all you need it to hide and show the element, you could well make use of ng-show/ng-hide directives to achieve that.

Landslide

Answer 2

This can happen if the expression evaluated returns the wrong type.

Expression evaluated:

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

must return an object literal:

return { order: -1 };

Marko

Answer 3

This is a late answer but I might help others that have the same issue like me.In my case the error is a.replace is not a function and finally I found the reason. It was happening due to ng-style and the expression was data-ng-style="isCompare==true ? {'max-height':'423'} : ***' '*** .... that space between single qoutes caused the error.After removing space the error went away.

Affra