Acabo de empezar a buscar en AngularJS. Mientras intentaba usar la prueba Jquery y Angularjs juntos, surgió un problema en el que parecía que AngularJs de alguna manera bloqueó la intervención de Jquery.

En el código a continuación: incluyo un controlador de eventos cliqueado jquery anchor, que bloqueará el anclaje de dirigir al usuario. Sin embargo, el ancla exterior del controlador angular funcionó bien mientras que el interior no funcionó.

¿Hay alguna forma de tener Jquery y AngularJs sin crear una directiva personalizada?

Html:

<body data-ng-app="AngApp">
    <a href="/haha" data-disable>open</a>
    <div data-ng-controller="demoCrtl">
        <div data-ng-switch on="test")>
            <span data-ng-switch-when="1"><a href="#" data-disable>Cancel</a></span>
            <span data-ng-switch-default> its default</span>
        </div>
    </div>
</body>

Javascript:

    var app = angular.module('AngApp',[]);
    app.controller('demoCrtl', ['$scope', function($scope) {
        $scope.test=1;
    }]);
    $('a[data-disable]').on('click',function(e){e.preventDefault();console.log('ha');});

Estoy usando angularjs 1.3 y Jquery 2.1.

Muchas gracias,

0
MikeNQ 30 ago. 2014 a las 11:02

2 respuestas

La mejor respuesta

No use código jQuery como este en su controlador. Debería usar la directiva ngClick y vincularla a una acción en su controlador.

En su opinión:

<a ng-click="disable()" ng-disabled="disabled">disable</a>

En su controlador

$scope.disabled = false;
$scope.disable = function () {
    console.log('disable clicked');

   // maybe do something else

     $scope.disabled = true;
 } 

Esto no replica lo que está tratando de hacer, pero más da un ejemplo de cómo vincular acciones en su controlador a elementos en su vista con la directiva ngClick, así como deshabilitar elementos con la directiva ngDisable.

1
Martin 30 ago. 2014 a las 09:58

No necesita incluir jQuery en su aplicación. porque está presente en su aplicación cuando la aplicación se está iniciando. Si jQuery no está presente en su ruta de script, Angular recurre a su propia implementación del subconjunto de jQuery que llamamos jQLite.

Verifique angular.element

1
Narek Mamikonyan 30 ago. 2014 a las 07:07