2017-08-17 8 views
0

Ich begann mit einer AngularJs App zu arbeiten. In index.js wird eine Reihe von moment.js-Funktionen in $rootScope exportiert. Der Autor hat dies getan, um diese Funktionen aus den HTML-Dateien zugänglich zu machen. Zum Beispiel

RSApp.run(function ($rootScope) { 
    $rootScope.toTime = function (date)  { return moment(date).format('HH:mm:ss'); }; 
    $rootScope.toCalendar = function (date) { return moment(date).calendar(); }; 
    $rootScope.fromNow = function (date) { return moment(date).fromNow(); }; 
    ... 

Statt $rootScope wie diese verschmutzen, ich denke an einfach moment selbst aussetzt, und spezifische moment.js Funktionen in HTML nennen.

RSApp.run(function ($rootScope) { 
    $rootScope.moment = moment; 

Meine Frage ist, aussetzt moment-$rootScope wie diese als gute Praxis?

Antwort

3

Nein, ist es nicht. Eigentlich ist es eine sehr schlechte Übung. Die beste Möglichkeit, die Funktionalität freizulegen, ist services und factories.

Das Problem ist, dass Bereiche Teil der schmutzigen Prüfung auf Zwei-Wege-Datenbindung sind, wenn Sie mehr Zeug hinzufügen, die nicht zum Geltungsbereich gehört, wäre nur zusätzliche Müll für angularjs während des Aufschlusses Zyklus zu überprüfen.

Sie können so etwas wie folgt verwenden:

angular.module('myMod') 
    .factory('dateUtil', function() { 
    return { 
     toTime: function(date) {  
     return moment(date).format('HH:mm:ss');  
     }, 
     toCalendar: function(date) {  
     return moment(date).calendar();  
     }, 
     fromNow: function(date) {  
     return 
     moment(date).fromNow();  
     } 
    }; 
    }); 

Auch wenn Sie diese Helfer in der Ansicht zu verwenden versuchen, Sie wollten es auf dem $rootScope an erster Stelle zu exponieren, Sie angulajs Filter verwenden sollten, So könnten Sie etwas wie {{ new Date() | toTime }} auf Ihre Ansichten tun.

Zum Beispiel:

angular.module('myMod') 
    .filter('toTime', function() { 
    return function(date) {  
     return moment(date).format('HH:mm:ss');  
    }; 
    }); 

Hinweis: Betrachten angular-moment Check-out, es könnte sehr nützlich sein, es Dienste und Filter hat bereits in der AngularJS Art und Weise verwendet werden.

2

Moment können injizierbare gemacht werden, indem die Schaffung eines module.constant service: es

RSApp.constant("moment", moment); 

Dann injizieren, wo immer nötig:

RSApp.controller("myCtrl", function($scope, moment) { 
    //code here 
}); 

$rootScope existiert, aber es kann für böse

verwendet werden

Scopes in AngularJS bilden eine Hierarchie, prototypica Erben Sie von einem Root-Bereich an der Spitze der Struktur. Normalerweise kann dies ignoriert werden, da die meisten Ansichten einen Controller und damit einen eigenen Bereich haben.

Gelegentlich gibt es Daten, die Sie für die gesamte App global machen möchten. Für diese können Sie $rootScope injizieren und Werte wie jeden anderen Bereich festlegen. Da die Bereiche vom Root-Bereich erben, stehen diese Werte für die an Direktiven wie ng-show angehängten Ausdrücke genauso zur Verfügung wie Werte für Ihren lokalen $scope.

Natürlich saugt globalen Zustand und Sie sollten $rootScope sparsam verwenden, wie Sie (hoffentlich) mit globalen Variablen in jeder Sprache verwenden würden. Verwenden Sie es insbesondere nicht für Code, sondern nur für Daten.Wenn Sie versucht sind, eine Funktion auf $rootScope zu setzen, ist es fast immer besser, sie in einen Dienst zu stellen, der dort injiziert werden kann, wo er benötigt wird, und einfacher zu testen.

Umgekehrt erstellen Sie keinen Dienst, dessen einziger Zweck im Leben darin besteht, Datenbits zu speichern und zurückzugeben.

— AngularJS FAQ - $rootScope exists, but it can be used for evil

Verwandte Themen