Angularjs - Get Element von Subdirektiven Name

-1

Ich versuche, eine erweiternde Box zu bauen. Also ich mein Setup html wie so:Angularjs - Get Element von Subdirektiven Name

<div class="expand" expand-block> 
    <label expand-button expanded="true">Style</label> 
    <ul expand-area> 
     <li><input type="checkbox" /> AWD/4WD</li> 
     <li><input type="checkbox" /> Commercial</li> 
     <li><input type="checkbox" /> Convertable</li> 
     <li><input type="checkbox" /> Coupe</li> 
     <li><input type="checkbox" /> Hatchback</li> 
     <li><input type="checkbox" /> Hybrid/Electric</li> 
     <li><input type="checkbox" /> Luxury</li> 
     <li><input type="checkbox" /> Sedan</li> 
    </ul> 
</div>

So, hier ist meine JS:

/* EXPAND BOX DIRECTIVE */ 
app.directive('expandBlock', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      elem.find('label').bind('click', function() { 
       var some = elem.find('label').html(); 
       console.log(some); 
      }); 
     } 
    }; 
});

ich machen möchte expand-Bereich ausblenden, wenn ich auf die Schaltfläche erweitern Sie auf. Ich kann das wahrscheinlich größtenteils tun, wenn ich das Element mit "label" erhalte, aber ich würde lieber auf das Attribut zugreifen und es scheint mir unmöglich, einen Weg zu finden, ohne das gesamte DOM zu durchsuchen.

Muss ich eine separate Direktive für den Expand-Button erstellen oder kann ich das alles innerhalb einer einzigen Direktive halten? Wenn ich es in einer einzigen Direktive halten kann, wie bekomme ich das Subelement nach Attribut?

Quelle

2016-05-19 Samir

Was mit Ihrem Code falsch ?! –

Wie ich schon sagte: "Ich kann das zum größten Teil tun, wenn ich das Element nach" label "bekomme, aber ich würde lieber auf den Attributnamen zugreifen." Also nichts ist falsch mit meinem Code, mein Code ist da, um ein Beispiel zu geben, was ich gerade mache, das funktioniert, aber jetzt möchte ich dieses Subelement durch das Attribut, nicht durch das Element-Tag – Samir

greifen So können Sie '.find ersetzen ('label') 'to' .find ('[expand-button]') '- es sei denn, ich vermisse etwas .. –

Um Element durch Attribut finden Sie eine CSS-Selektor wie verwenden können: [attribute-name]

.find('label') zu .find('[expand-button]')

Falls Sie nicht jQuery verwenden ersetzen, können Sie nicht Attributselektor verwenden, so dass Sie das bekommen Element nach Attributen wie folgt aus:

angular.element(elem[0].querySelector('[expand-button]'))

Related question

Arbeits Demo:

var app = angular.module("bLinked", []); 
 
/* EXPAND BOX DIRECTIVE */ 
 
app.directive('expandBlock', function() { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope, elem, attrs) { 
 
     var btn = angular.element(elem[0].querySelector('[expand-button]')), 
 
      area = angular.element(elem[0].querySelector('[expand-area]')); 
 

 
     btn.bind('click', function() { 
 
     if (area.hasClass('hidden')) { 
 
      area.removeClass('hidden'); 
 
     } else { 
 
      area.addClass('hidden'); 
 
     } 
 
     }); 
 
    } 
 
    }; 
 
});

/* Styles go here */ 
 
.hidden { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 

 
<body ng-app="bLinked"> 
 

 
    <div class="expand" expand-block> 
 
    <label expand-button>Style</label> 
 
    <ul expand-area> 
 
     <li><input type="checkbox" /> AWD/4WD</li> 
 
     <li><input type="checkbox" /> Commercial</li> 
 
     <li><input type="checkbox" /> Convertable</li> 
 
     <li><input type="checkbox" /> Coupe</li> 
 
     <li><input type="checkbox" /> Hatchback</li> 
 
     <li><input type="checkbox" /> Hybrid/Electric</li> 
 
     <li><input type="checkbox" /> Luxury</li> 
 
     <li><input type="checkbox" /> Sedan</li> 
 
    </ul> 
 
    </div> 
 
</body>

https://plnkr.co/edit/z9VGfGxAfeWdC6WmHdfZ?p=preview

Quelle

2016-05-19 11:09:59

Nur eine Sekunde, ich habe einige Probleme, es zu laden. Sie können hier sehen: https://plnrkr.co/edit/7cZDmxDDSJ3zcHHTTRr4 Es scheint nicht das Element zu finden. Oder fehlt mir etwas? – Samir

Dies endete für mich arbeiten var el = eckle.element (elem [0] .querySelector ('[expand-button]')); \t \t console.log (el.html()) ;. Die Hässlichkeit davon lässt mich denken, dass dies der falsche Weg ist, Dinge zu tun. Ich werde deine Antwort als richtig markieren, aber ich denke nicht, dass dies die eckige Art ist, es zu tun, also werde ich weiter schauen. – Samir

Angularjs - Get Element von Subdirektiven Name

Antwort

Verwandte Themen