Attribute von Eltern zu inneren Kontrollen in der Winkelanweisung kopieren

Ich möchte eine winklige Richtlinie machen, sagen Sie <my-directive/>. Die Richtlinie sollte wie:Attribute von Eltern zu inneren Kontrollen in der Winkelanweisung kopieren

<div> 
    <input /> 
    <button></button> 
</div>

Ich möchte die Attribute kopieren ich meine Anweisung an die innere input Element hinzufügen. Also sagen, wenn ich schreibe

<my-directive ng-model="ctrl.some" 
       pattern="/.../" 
       placeholder="some placeholder for input" 
       required />

Diese Attribute sollten auf die Eingabe in meiner Direktive kopiert werden. Kann ich das auf eine gute Weise erreichen? Oder sollte ich meine Richtlinie auf einen anderen Weg bringen?

Quelle

2016-06-16 Jim-Y

Die erste Sache, wenn Sie Ihre eigene Direktive erstellen, schätze ich, dass Sie das ng-Modell und andere Namen nicht verwenden werden, wie es ist.

Nun, sagen wir, eine neue Richtlinie my-directive

In der Richtlinie Definition zu erstellen, können wir diese Attribute Variablen über die Richtlinie scope zuweisen und so würden sie auf die inneren Kontrollen sichtbar sein.

So etwas wie dieses

return { 
    scope:{ 
     model:'=', 
     myplaceholder:'=' 
    }, 
    link : //process the scope variables here, as required 
    ... 

    template:'<input ng-model="model" placeholder="{{myplaceholder}}"/> ... ' 

}

so etwas wie diese (nicht der genaue Code), und es sollte funktionieren.

Verwenden Sie es als:

<my-directive model="someScopeVar" myplaceholder="someOtherScopeVar"> 
</my-directive>

Notiere die {{ }} um myplaceholder in template, das ist, weil placeholder Eigenschaft eine interpolierte Zeichenfolge erwartet und nicht eine Variable.

Quelle

2016-06-16 07:45:41 gaurav5430

Sie können die Attribute der Direktive in der Link-Funktion lesen. Im folgenden Beispiel ist die erste Eingabe eine Texteingabe, die zweite eine Passworteingabe. Der Typ der Eingabe wird von den direktiven Attributen übergeben.

Um ng-Modell zu übergeben ist komplexer. Sie sollten den isolieren Bereich verwenden.

https://plnkr.co/edit/rxgE7BtVR9mEeqKhwfNn

index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controlle="testCtrl"> 
    <h1>Test directive</h1> 
    <test-directive required="true" type="text"></test-directive> 
    <test-directive required="true" type="password"></test-directive> 
    </body> 

</html>

richtlinien template.html

<div> 
    <input /> 
    <buuton>Button</buuton> 
</div>

script.js

var appModule = angular.module('myApp',[]); 

appModule.controller('testCtrl',[]); 
appModule.directive('testDirective',function(){ 
    return { 
    templateUrl:'directive-tpl.html', 
    link:function(scope,element,attr){ 
     var inputEl = element.find('input'); 
     inputEl.attr("required",attr.required); 
     inputEl.attr("type",attr.type); 
    } 
    } 
})

Quelle

2016-06-16 08:11:41 user3083618

Attribute von Eltern zu inneren Kontrollen in der Winkelanweisung kopieren

Antwort

Verwandte Themen