quinta-feira, 20 de outubro de 2016

Modificando Angular JS para aceitar seletores jQuery

Como toda inovação, o framework Angular provocou certas perdas de funcionalidades.

Uma destas perdas foi em relação à instrução "find" do jQuery, ao qual deu o nome de "JQLite".

A alteração

No entanto, podemos restituir o poder ao JQLite do framework Angular JS através de uma pequena modificação, que mostramos abaixo.

Basta procurar a função find do JQLite através de qualquer editor de texto na versão de desenvolvimento:


Abaixo da função "find", inclua o seguinte:


Se o navegador for de uma atualização recente, ele certamente possuirá a instrução "querySelector"

No código

Em sua página que utiliza o Angular, o código será parecido com o seguinte:

<div id="d01" class="d01" ng-app="App" ng-controller="myCtl" ng-init="firstName='John'">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
<script>
angular.module('App', []).controller('myCtl', function ($scope, $document) {
angular.element($document).ready(function () {
$document.findsel("#d01").css("backgroundColor", "lightyellow");
});
});
</script>
</div>

Repare que tivemos que fazer a injeção de $document no módulo.