0

I'm using SPA with Angular and trying to use some jquery in my page after rendering the a particular page. But the problem is that the jquery code doesn't work and no errors on the console either.

Hope you can help me out, here is my code:

app.js: 

var app = angular.module('app', ['ngRoute', 'angularCSS']);

app.config(function($routeProvider){
    
    $routeProvider
    
    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController',
        css: 'styles/main.css'
    })

    .when('/second', {
        templateUrl: 'pages/second.html',
        controller: 'secondController',
        css: ['styles/second.css', 'styles/second_2.css'] 
    }); 
});

app.controller('mainController', ['$scope', function($scope){
    
    
}]);

app.controller('secondController', ['$scope', function($scope){
    
    
}]);

the main page, index.html:
<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>Untitled Document</title>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" href="styles/viewbox.css">
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="angular-css.js"></script> 
        <script src="app.js"></script> 
    </head>
    <body>
        <div>
            <h3><a href="#/">Main</a></h3>
            <h3><a href="#/second">Second</a></h3>
        </div>    
        
            <ng-view></ng-view>
         
    </body>
</html>

and here is the template, second.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.viewbox.js"></script>
<script>

    $(function(){

        $('img').click(function(){
            alert("my img");
        });


    })

</script>

<h1>Hello, this is Second Page</h1> 

<img src="pic1.jpg" alt="" width="250" height="250">
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
zb22
  • 3,126
  • 3
  • 19
  • 34
  • 1
    I won't discount your wanting to use jQuery but Angular does contain an `ng-click` directive or attribute for accomplishing something like this. You probably want to stick with one design paradigm (i.e. either AngularJS syntax or jQuery syntax, rather than combine the two in the same application). – War10ck Jun 06 '17 at 16:43
  • clicking the img was just to test it, I want to use other jquery methods in that page – zb22 Jun 06 '17 at 17:11
  • Are you including vendor script tags in your template? jQlite strips script tags in templates. So if your code is exactly as above, your script tags will never run. You should be including all vendor scripts in your main index.html file, or make sure that jQuery is loaded before everything else. I agree with everyone else that you should not be mixing design paradigms. – Pop-A-Stash Jun 06 '17 at 18:34
  • I'm trying to add a jquery plugin called viewbox (http://www.jqueryscript.net/demo/Tiny-Responsive-Lightbox-Gallery-Plugin-For-jQuery-Viewbox/), I can't make it work with angular together – zb22 Jun 06 '17 at 18:39
  • @Chetas updated his answer with more information. Please take a look and see if it helps. – Heretic Monkey Jun 07 '17 at 17:13
  • I found the solution for that: https://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs This is the way to add jquery plugins with Angular – zb22 Jun 07 '17 at 17:53

1 Answers1

0

Here, I would agree with @War10ck that you should stick to AngularJS to avoid complexity in future. You need to put that function into controller like this:

app.controller('mainController', ['$scope','$window', function($scope, $window){

$scope.myFunction = function(){
window.alert("my img");
};

}]);

HTML code:

<img src="pic1.jpg" ng-click="myFunction()" alt="" width="250" height="250">

You should not use jQuery on the top of the AngularJS, because AngularJS digest cycle wont run if we do any angular DOM manipulation or scope variable manipulation using JQuery.

As you migrate you jQuery component to AngularJS you need to follow below things:

You need first search angular-ui-bootstrap site because they had covered most of the UI component which has already converted to angular. I'm sure you will not found every plugin Angular version, at that you should wrap that plugin to directive. Which will give you controller over the DOM element where ever directive has placed.(Example here for Datepicker using directive)

Don't try to bind event from outside angular context that will create a digest cycle, that will leads to affect in binding updation on UI.

Ensure while making any ajax call that should be using $http rather than using $.ajax

There are many places you can find in jquery code that would be replace by ng-class directive, like if you are doing only adding & removing class, or showing some element on basis of any condtion, so that sort of jquery code can be replace by use ng-class directive

Look for the places where you are only removing a DOM or adding DOM that could be easily replaced by the the ng-if directive, or only show hide of element can be done by using either ng-show/ng-hide

Also find such a part in UI in which you are creating same DOM using for loop that can be convert to angular native directive ng-repeat

If you have any case where you wanted to show and hide multiple element, so that part of code would be implemented using ng-switch directive

(Sorry for adding this here as i do not have enough reputation to comment on your post) Hello, I just read your comment there as you want to use jQuery viewbox in your code. My suggestion would be to use Angular UI-bootstrap Modal (click here). I have used Modal in many of my projects and it works great! I hope this helps

Chetas Mehta
  • 1
  • 6