javascript - jQuery find () -menetelmä ei toimi AngularJS-direktiivissä

Translate

Minulla on vaikeuksia angularjs-direktiivien löytämisessä lapsille tarkoitetuista DOM-elementeistä, joissa on injektoitu kulmaelementti.

Minulla on esimerkiksi tällainen direktiivi:

myApp.directive('test', function () {
    return {
        restrict: "A",
        link: function (scope, elm, attr) {
            var look = elm.find('#findme');
             elm.addClass("addedClass");
            console.log(look);
        }
    };
});

ja HTML, kuten:

<div ng-app="myApp">
    <div test>TEST Div
        <div id="findme"></div>
    </div>
</div>

Minulla on pääsy elementtiin, joka on profiloitu lisäämällä siihen luokka. Lapsielementin käytön yrittäminen tuottaa kuitenkin tyhjän matriisin var-ulkoasuun.

JSFiddle-demo on täällä.

Miksi jotain niin triviaalia ei toimi kunnolla?

This question and all comments follow the "Attribution Required."

Kaikki vastaukset

Translate

Alkaenasiakirjat päälläangular.element:

find()- Rajoitettu hakuihin tunnisteen nimen mukaan

Joten jos et käytä jQueryä Angularin kanssa, mutta luotat sen jqlite-toteutukseen, et voi tehdäelm.find('#someid').

Sinulla on pääsychildren(), contents()jadata()toteutuksia, joten voit yleensä löytää tien siitä.

Lähde
Translate

Voit ratkaista ongelman helposti kahdessa vaiheessa:

1 - Saavuta alielementti käyttämällä kyselyvalintaa näin:var target = element[0].querySelector('tbody tr:first-child td')

2- Muunna seangular.elementvastustaa uudelleen tekemällä:var targetElement = angular.element(target)

Tämän jälkeen sinulla on pääsy kaikkiin odotettuihin menetelmiintargetElementmuuttuja.

Lähde
Translate

Ennen jQueryn päiviä käytit:

   document.getElementById('findmebyid');

Jos tämä yksi rivi säästää koko jQuery-kirjastoa, kannattaa ehkä käyttää sitä sen sijaan.

Suorituskyvystä huolestuneille: Valitsijan aloittaminen tunnuksella on aina parasta, koska se käyttää natiivitoimintoa document.getElementById.

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

http://learn.jquery.com/performance/optimize-selectors/

jsPerfhttp://jsperf.com/jquery-selector-benchmark/32

Lähde
Translate

find()- Rajoitettu hakuihin tunnisteen nimen perusteella näet lisätietojahttps://docs.angularjs.org/api/ng/function/angular.element

Voit myös käyttää nimeä tai tunnusta tai soittaa seuraavaan esimerkkiin:

angular.element(document.querySelector('#txtName')).attr('class', 'error');
Lähde
Translate

käytin

elm.children('.class-name-or-whatever') 

saada lapset nykyisestä elementistä

Lähde
Translate

Jos joku haluaa napata "ohjain" -elementin soveltamisalan, jotain tällaista:

<div id="firstctrl" ng-controller="firstCtrl as vm">  

käytä seuraavaa:

var vm = angular.element(document.querySelector('#firstctrl')).scope().vm;
Lähde
Translate

Voit tehdä sen näin:

 var myApp = angular.module('myApp', [])
  .controller('Ctrl', ['$scope', function($scope) {
     $scope.aaa = 3432
 }])
 .directive('test', function () {
    return {
       link: function (scope, elm, attr) {
           var look = elm.children('#findme').addClass("addedclass");
           console.log(look);
        }
   };
});

<div ng-app="myApp" ng-controller="Ctrl">
   <div test>TEST Div
      <div id="findme">{{aaa}}</div>
   </div>
</div>

http://jsfiddle.net/FZGKA/133/

Lähde
Kirjailijasta