javascript - attribute - angularjs create custom directive example



Il metodo jQuery find() non funziona nella direttiva AngularJS (5)

Dai documenti su angular.element :

find() - Limitato alle ricerche per nome del tag

Quindi, se non stai usando jQuery con Angular, ma facendo affidamento sulla sua implementazione jqlite, non puoi fare elm.find('#someid') .

Hai accesso alle implementazioni di children() , contents() e data() , di solito puoi trovare un modo per aggirarlo.

https://ffff65535.com

Sto avendo problemi con le direttive angularjs che trovano elementi DOM figlio con l'elemento angolare iniettato.

Ad esempio, ho una direttiva in questo modo:

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

e HTML come:

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

Ho accesso all'elemento che è proffed aggiungendo una classe ad esso. Tuttavia, il tentativo di accedere a un elemento figlio produce una matrice vuota nell'aspetto var.

La demo di JSFiddle è qui .

Perché qualcosa di così banale non funziona correttamente?


Prima dei giorni di jQuery dovresti usare:

   document.getElementById('findmebyid');

Se questa riga ti salverà un'intera libreria jQuery, potrebbe valere la pena di usarla al suo posto.

Per chi è preoccupato per le prestazioni: l'inizio del selettore con un ID è sempre ottimale poiché utilizza la funzione nativa document.getElementById.

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

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

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

jsPerf http://jsperf.com/jquery-selector-benchmark/32


Puoi farlo in questo modo:

 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/


Se qualcuno sta cercando di estrapolare l'ambito da un elemento 'controller as', .. qualcosa del genere:

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

utilizza il seguente:

var vm = angular.element(document.querySelector('#firstctrl')).scope().vm;

find() - Limitato alle ricerche per nome tag è possibile visualizzare ulteriori informazioni https://docs.angularjs.org/api/ng/function/angular.element

Inoltre è possibile accedere per nome o id o chiamare per favore nell'esempio seguente:

angular.element(document.querySelector('#txtName')).attr('class', 'error');




angularjs-directive