AngularJS: die übergabe von boolean-Wert, der Richtlinie

Kann ich nicht passieren booleschen Wert meine Richtlinie.

Hier ist mein HTML:

<city-zip city="clientCity" zip="clientZip" requiredParam="'true'"></city-zip>

Richtlinie:

.directive('cityZip', function() {
    return {
        restrict: 'E',
        templateUrl: '../templates/templateCityZip.html',
        scope: {
            city: '=',
            zip: '='
        },
        controller: function($scope) {}
    }
});

Jede Hilfe wäre sehr geschätzt werden.

Erstellen Sie einfach eine scope-variable, um diese zu überprüfen. Theres keine Notwendigkeit zu übergeben als string. Sollten Sie als variable übergeben

InformationsquelleAutor be-codified | 2015-06-22

  1. 11

    HTML

    <city-zip city="clientCity" zip="clientZip" required-param="true"></city-zip>
<city-zip city="clientCity" zip="clientZip" required-param="{{ someBooleanValue }}"></city-zip>

    Winkel

    .directive('cityZip', function() {
    return {
        restrict: 'E',
        templateUrl: '../templates/templateCityZip.html',
        scope: {
            city: '=',
            zip: '=',
            requiredParam:'@'
        },
        link: function(scope) {
            console.log("requiredParam", scope.requiredParam);
        }
    }
})
    Es tut mir Leid, dieser gibt Sie undefined zurück.
    überprüfen Sie nun, bearbeitet '-param=', war 'requiredParam='
    Ich habe dies geändert. Sie können bitte werfen Sie einen Blick auf meinen unteren Kommentar über ng-erforderlich?
    Kommentar hat mich gerettet. Ich vergessen in Eckigen nehmen Sie die camelCaseNames und machen Sie alle-komisch-mag.
    AKA "snake case"

    InformationsquelleAutor Dmitri Algazin

  2. 8

    Innen link können Sie das Attribut Zugriff:

    return {
    //code
    link: link
}

function link(scope, $el, attrs) {
    var requiredParam = attrs.requiredParam === 'true';
}

    Werde, zwingen Sie den string-Wert in einen booleschen (wenn der string-Wert ist 'true', es wird true zurückgegeben, ansonsten werde es "false" zurück.)

    Den wichtigsten Teil hier ist, wie zu konvertieren einen string mit dem Wert "true" oder "false" boolean form, da !!'true' und !!'false' beide true zurück. Sehen diese Antwort für die Lösung und erweiterte Diskussion.

    Wenn Sie müssen, verwenden Sie den Wert in Ihrem controller, können Sie das gleiche Muster in der scope - Objekt und übergeben es in seiner gezwungenen form an den controller gekoppelt.

    ja, ich erkannte, dass, änderte ich meine Antwort rechts, bevor Sie kommentiert (das sagt nun var requiredParam == attrs.requiredParam === 'true'.
    Danke für deine Antwort. Meine Richtlinie ist arbeiten nicht möglich, weil link und controller gleichzeitig? Können Sie zeigen Sie mir, wie Sie dazu im controller? Ich selbst weiß nicht, warum link ist für.
    Ich würde vorschlagen, das Lesen der AngularJS Dokumentation für Richtlinien, die es bietet ziemlich gute Erklärung, wie link.

    InformationsquelleAutor Josh Beam

  3. 6

    Ich denke die einfachste /sauberste Antwort wurde noch nicht aufgenommen worden, für diese Frage. Diese Antwort passt auch innerhalb der HTML5-Spezifikation für ein Boolesches Attribut - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

    2.5.2 Boolean Attribute

    Einer Reihe von Attributen boolean-Attribute. Die Anwesenheit von ein
    boolean-Attribut auf ein element
    repräsentiert den Wert true, und die
    Abwesenheit des Attributs darstellt
    der Wert false.

    Wenn das Attribut vorhanden ist, der Wert muss entweder einen leeren string
    oder ein Wert, der einem ASCII -
    groß-und Kleinschreibung für die
    Attribut canonical name, der keine
    führende oder nachfolgende Leerzeichen.

    Die Werte "true" und "false" sind nicht erlaubt bei booleschen Attributen. Zu
    stellen Sie einen falschen Wert, das Attribut
    hat Sie zu unterbleiben ganz.

    HTML:

    <city-zip city="clientCity" zip="clientZip" requiredParam></city-zip>

    Sowie die Richtlinie:

    .directive('cityZip', function() {
    return {
        restrict: 'E',
        templateUrl: '../templates/templateCityZip.html',
        scope: {
            city: '=',
            zip: '='
        },
        controller: function($scope, $attrs) {
            $scope.requiredParamExists = $attrs.hasOwnProperty( 'requiredParam' );
        }
    }
});

    Einfach, passt sauber mit HTML5-Spezifikation für Boolesche Attribute, und keine Notwendigkeit zu zwingen, einen string an eine scope-variable ('requiredParam': '=').

    Beachten Sie in dem Beispiel-code oben, wenn minified, die erforderlichen Variablen $scope und $attrs wird sich ändern, um eine kürzere Zeichenfolge und den code brechen, aber das ist ein anderes Thema.

    Großes problem mit dieser Implementierung ist, wenn Sie verwenden möchten, eine Komponente, die mit dieser Art von Attribut-Vorlage in Ihrem eigenen Komponente und, zur gleichen Zeit, dynamisch, gehören oder nicht gehören, das Attribut. Zum Beispiel, wenn Sie wollten, auszuschalten oder auf ui-wählen Sie "multiple" - Attribut dynamisch w/o wiederholen Sie den HTML-element und mit ng-if. Auf dieser Grundlage allein empfehle ich persönlich nie verwenden Sie die Muster in dieser Antwort.
    Ich bin mir nicht ganz verfolgen, da es schon eine Weile her, ich arbeitete an diesem Problem. Können Sie ein Beispiel geben, das problem und/oder was Sie gefunden haben, besser zu arbeiten, für die Nachwelt?
    Sie müssen nur ng-attr- mit diesem ein.

    InformationsquelleAutor ryanm

  4. 1

    Gibt es 3 Parameter, die Sie übergeben können, die link-Funktion die Arbeit an der Richtlinie. Parameter sind scope, element und attributes.

    1. scope gibt den Umfang der Steuerung, die Richtlinie ist unter.

    2. element übergibt die Informationen über die DOM-element, auf das es angewendet wird

    3. Attribute übergibt die Informationen über alle DOM-element Attribute, die auf das element. 

      <city-zip ng-app="myapp" city="clientCity" zip="clientZip" required-param="true"></city-zip>

angular.module("myapp", []).directive('cityZip', function() {
return {
    restrict: 'E',
    templateUrl: '',
    scope: {
        requiredParam:'@'
    },
    link: function(scope, $el, attrs) {
        alert( attrs.requiredParam);
    }
}

      })

    Arbeiten jsFiddle

    Vielen Dank für deine Mühe. Ich habe die true oder false, aber irgendwie glaube ich, das ist nicht wirklich boolean. Ich bin mit ng-required="requiredParam" in meinem Richtlinie Vorlage: bekomme ich Fehler bei der Validierung obwohl ng-required auf true gesetzt ist.
    Das ist eine Arbeit, ich habe vergessen zu binden requiredParam (setzen Sie Sie in geschweifte Klammern).

    InformationsquelleAutor Lalit Sachdeva

Schreibe einen Kommentar