Tipo angolareErrore: name.replace non è una funzione per ng-style

Question

Sono nuovo ad angolare e continuo ad ottenere il seguente errore nella console TypeError: name.replace is not a function. Non sono sicuro di cosa lo stia causando esattamente, ma sembra essere causato dall'istruzione ng-style e forse qualcosa da fare con il camelCase?

La parte che non capisco è perché ng-style="isFrontView() || !matches && {'display': 'none'}" genera l'errore, ma ng-style="!isFrontView() || !matches && {'display': 'none'}" non genera l'errore.

Nel tentativo di risolvere la situazione, ho provato a rimuovere CamelCase dal nome della funzione e sono andato in minuscolo. Ho anche provato a utilizzare !!isFrontView(), ma nessuno dei due sembrava rimuovere il messaggio di errore.

Qualcuno sa qual è la causa di questo messaggio di errore e una potenziale correzione? Template

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> 

codice backend:

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

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

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

P.S. Anche con l'errore della console tutto funziona ancora normalmente.

Answer 1

Il tuo potenziale problema è dovuto all'uso errato di ng-style. ng-style sets a watcher on the expression e imposta element's style with the help of jquery/jqlite element.css. E l'attributo interno element.css css (name) viene convertito nell'involucro standard del cammello (which uses regex string replace). Nel suo caso specifico l'espressione valutata in boolean (true) invece di un oggetto (ng-style does this for each property) e boolean non ha replace proprietà (che è disponibile su un stringa oggetto) e quindi viene a mancare. È possibile verificare ciò convertendo l'espressione per valutare su una stringa utilizzando la concatenazione di stringhe.

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

Guardando l'espressione tutto ciò che serve per nascondere e mostrare l'elemento, si potrebbe anche fare uso di ng-show/ng-hide direttive per raggiungere questo obiettivo.

Answer 2

Questa è una risposta in ritardo, ma mi potrebbe aiutare gli altri che hanno lo stesso problema come me.In mio caso l'errore è a.replace non è una funzione e alla fine ho trovato il motivo. Stava succedendo a causa di ng-style e l'espressione era data-ng-style="isCompare==true ? {'max-height':'423'} : ***' '*** .... che lo spazio tra qoutes singoli causava l'errore. Dopo aver rimosso lo spazio l'errore andava via.

Answer 3

Ciò può accadere se l'espressione valutata restituisce il tipo errato.

espressione valutata:

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

deve restituire un oggetto letterale:

return { order: -1 };