与$的Angular和jQuery冲突 [英] angular and jQuery conflict with $

问题描述

我在Stack上阅读了许多与此类似的问题，但无法解决我的问题.我有一个角度模块和控制器，可以在之前正常工作，我包括jQuery库.当我包含它时(在包含angular lib之前)，我得到了

I've read many similar questions to this on Stack but I haven't been able to solve my issue. I have a angular module and controller which works fine before I include the jQuery library. When I include it (before angular lib is included), I get

Error: $scope.markersEvent is undefined

当我在控制器中有console.log($)时，我会得到

and when in the controller I have console.log($) i get

function jQuery()

我的理解是，如果我在jQuery之后加入Angular ，应该不会有冲突，因为Angular会接受" $.不过，我还是尝试过

My understanding is that if I include Angular after jQuery there should be no conflict because Angular "takes" the $. Still, I tried

<script type="text/javascript">var j = $.noConflict();</script>

然后会显示console.log($)

And console.log($) will show

undefined

要让Angular使用$和jQuery使用jq，该怎么办?抱歉，我在Angular还是个新手.

What should I do to have Angular using $ and jQuery using, say, jq? Sorry, I'm rather new at Angular.

代码: Index.html

Code: Index.html

<link rel="shortcut icon" href=""><!-- for removing favicon error -->     
<!-- script references -->
<script src="externals/jquery/jquery-1.12.1.js"></script>
<script type="text/javascript">var j = $.noConflict();</script>
<script src="externals/angularjs/lodash.js"></script>
<script src="externals/angularjs/angular.js"></script>
<script src="externals/angularjs/angular-ui-router.js"></script>
<script src="externals/angularjs/angular-animate.js"></script>
<script src="externals/angularjs/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="externals/angularjs/angular-google-maps.js"></script>
<script src="app/app.js"></script>
<script src="app/components/partials/eventJoin/eventJoin.module.js"></script>
<script src="app/components/partials/eventCreate/eventCreate.module.js"></script>
<script src="app/components/directives/header-menu/header-menu.module.js"></script>
<script src="app/components/directives/header-login/header-login.module.js"></script>
<script src="app/components/directives/event-type-choose/event-type-choose.module.js"></script> 
<script src="app/components/directives/sidebar-event-list/sidebar-event-list.module.js"></script>

eventJoin.module.js

eventJoin.module.js

angular.module('eventJoin.module', [])
//controller start
.controller('eventJoinController', function ($scope) {
    angular.element(document).ready(function () {
        //run when DOM is ready
        console.log($);
        initMap();
        for (i = 0; i < $scope.markersEvent.length; i++) {
            initMarkers($scope.markersEvent[i]); //create initial markers
        }
    });
    //Pre-load document.ready
    function initMap() {
        $scope.mapProp = {
            //karta över sverige
            center : {
                lat : 62.5421031,
                lng : 19.7477994
            },
            zoom : 5,
        };
        $scope.map = new google.maps.Map(document.getElementById('googlemap'), $scope.mapProp);
    }
    function initMarkers(info) {
        console.log("initMarkers function");
        new google.maps.Marker({
            map : $scope.map,
            position : new google.maps.LatLng(info.lat, info.lang),
            title : "test"
        });
    }
    $scope.markersEvent = [{
            city : 'Göteborg',
            desc : 'This is the best city in the world!',
            lat : 57.716610,
            lang : 11.973904
        }, {
            city : 'Stockholm',
            desc : 'Shit city',
            lat : 59.336574,
            lang : 18.067879
        }, {
            city : 'Kiruna',
            desc : 'Shit city',
            lat : 67.858475,
            lang : 20.225530
        }
    ];
})
//END controller

app.js

var myApp = angular.module('app', ['ui.router', 'eventJoin.module', 'eventCreate.module', 'header-menu.module', 
'header-login.module', 'event-type-choose.module', 'sidebar-event-list.module']);
    myApp.controller('appController', function() {
        var appCont = this;
        appCont.shit = "hhh";
});

推荐答案

我现在已经解决了，至少暂时是这样.在此视频之后，该方法基本上与noConflict的jQuery文档相同，也就是说，将其他库放在jQuery的之前，然后调用noConflict即可.我之所以没有尝试过此操作，是因为1.我已阅读到jQuery应该在Angular之前加载，并且2.此

I have solved it now, at least for the time being. Following this video, which basically does the same as the jQuery documentation for noConflict, that is, putting other libraries before jQuery and then calling noConflict, it works. The reason why I did not try this before is that 1. I have read that jQuery should be loaded before Angular and 2. this link says that if other libraries are loaded after jQuery then those will be granted the '$'-sign without the need for using noConflict.

错误消失了，站点按预期加载.

The error is gone and the site loads as it is suppose to.

这篇关于与$的Angular和jQuery冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！