如何使用jQuery选择器来使用由Angular动态设置的Id？_Jquery_Angularjs

如何使用jQuery选择器来使用由Angular动态设置的Id？

jquery angularjs

如何使用jQuery选择器来使用由Angular动态设置的Id？,jquery,angularjs,Jquery,Angularjs,我正在构建一个小应用程序来测试演示的不同可能性。这个应用程序是我所在地区酒吧的个人“旅行顾问”。对于每个酒吧，我都会存储一个名字、一个标记和它的位置我在应用程序中有3个页面：显示所有酒吧：pubList.html 添加发布：addPub.html 显示一个发布详细信息：pubdail.html 我只需单击元素，就可以从pubList导航到pubDetail。pubDetail控件使用$routeParams获取发布索引我的目标是使用存储的coordonates显示一个显示酒吧所在位置

我正在构建一个小应用程序来测试演示的不同可能性。这个应用程序是我所在地区酒吧的个人“旅行顾问”。对于每个酒吧，我都会存储一个名字、一个标记和它的位置

我在应用程序中有3个页面：

显示所有酒吧：pubList.html
添加发布：addPub.html
显示一个发布详细信息：pubdail.html

我只需单击元素，就可以从pubList导航到pubDetail。pubDetail控件使用$routeParams获取发布索引

我的目标是使用存储的coordonates显示一个显示酒吧所在位置的谷歌地图。问题是，如果第一个酒吧显示得很好，那么第二个（当返回pubList并打开另一个酒吧时）就不起作用了。我想在mapContainer div中的条上注入索引，如下所示：

pubDetail Controleur

app.controller("pubDetailControler", function ($scope, $rootScope, $routeParams) {  
    //Local pub
    $scope.localPub = $rootScope.pubList[$routeParams.index];
    $scope.localPub.index = $routeParams.index;
}

pubDetail视图

<div class="col-xs-12">
    <h1>{{localPub.name}}</h1>
    <div id="mapContainer-{{ localPub.index }}"></div>
</div>

顺便说一下，如果我的jQuery选择器失败，google maps实例也会失败：

var tmpMap = new google.maps.Map(document.getElementById('mapContainer-' + $scope.barLocal.index), [...]);

有人知道我如何与这个部门互动吗

===================================================== 编辑：这是pubList和pubDetail元素的（简化但完整的）代码。代码是法语的，但我认为它足够小，可以完全理解

index.html

<!DOCTYPE html>
<html ng-app="monBarAdvisor">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src *">
    <title>BarAdvisor</title>

    <!—Feuilles de style -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />

    <!-- Librairies externes -->
    <script src="scripts/jquery-3.1.1.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/ng-cordova.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB2Czg7F2iw6Zz0JMebInmofW4e83aPsB8"></script>

    <!-- Référence Cordova ajoutée à votre application une fois générée. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <!--Librairies personnelles-->
    <script src="lib/index.js"></script>
    <script src="lib/app.js"></script>
    <script src="lib/controleurs/afficherBar.js"></script>
    <script src="lib/controleurs/barsControleur.js"></script>
</head>
<body>
    <!-- Menu -->
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav">
                <li class="pull-left"><a href="#/">Tous</a></li>
                <li class="pull-right"><a href="#/ajouteBar">Ajouter</a></li>
            </ul>
        </nav>

    </div>

    <!-- Contenu -->
    <div>
        <ng-view></ng-view>
    </div>

</body>
</html>

pubList视图，此处命名为bar.html

<!DOCTYPE html>
<html ng-app="monBarAdvisor">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src *">
    <title>BarAdvisor</title>

    <!—Feuilles de style -->
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />

    <!-- Librairies externes -->
    <script src="scripts/jquery-3.1.1.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/ng-cordova.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB2Czg7F2iw6Zz0JMebInmofW4e83aPsB8"></script>

    <!-- Référence Cordova ajoutée à votre application une fois générée. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>

    <!--Librairies personnelles-->
    <script src="lib/index.js"></script>
    <script src="lib/app.js"></script>
    <script src="lib/controleurs/afficherBar.js"></script>
    <script src="lib/controleurs/barsControleur.js"></script>
</head>
<body>
    <!-- Menu -->
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <ul class="nav navbar-nav">
                <li class="pull-left"><a href="#/">Tous</a></li>
                <li class="pull-right"><a href="#/ajouteBar">Ajouter</a></li>
            </ul>
        </nav>

    </div>

    <!-- Contenu -->
    <div>
        <ng-view></ng-view>
    </div>

</body>
</html>

pubDetail视图，此处命名为afficherBar

app.controller("pubDetailControler", function ($scope, $rootScope, $routeParams) {  
    //Local pub
    $scope.localPub = $rootScope.pubList[$routeParams.index];
    $scope.localPub.index = $routeParams.index;
}

console.log工作得很好，但是.css（）一点也不管用。

你能分享整个过程吗？你可以一起使用jQuery和Angular，但你需要理解Angular的工作原理，与使用jQuery的经典网页不同，并在编写jQuery代码时考虑到这一变化。我建议使用Angular库，为你提供使用谷歌地图的指令，fe：我会发布代码明天，我只能“评论”“今天不应该使用jQuery来处理这些问题。建议阅读@sniels：用完整的代码编辑了这篇文章。你能分享全部内容吗？您可以同时使用jQuery和Angular，但您确实需要了解Angular的工作原理与使用jQuery的经典网页不同，并在编写jQuery代码时牢记这一变化。我建议您使用Angular库，该库为您提供使用谷歌地图的指令，fe：我明天将发布代码，我只能“评论”今天不应该使用jQuery来处理这些问题。建议阅读@sniels：用完整的代码编辑帖子。

<div ng-repeat="tmpBar in listeBars">
    <a href="#/bar/{{ $index }}">
        <div>
            <p class="bar_nom">{{tmpBar.nom}}</p>
            <p class="bar_note" ng-show="{{tmpBar.note==0}}">☆☆☆☆☆</p>
            <p class="bar_note" ng-show="{{tmpBar.note==1}}">★☆☆☆☆</p>
            <p class="bar_note" ng-show="{{tmpBar.note==2}}">★★☆☆☆</p>
            <p class="bar_note" ng-show="{{tmpBar.note==3}}">★★★☆☆</p>
            <p class="bar_note" ng-show="{{tmpBar.note==4}}">★★★★☆</p>
            <p class="bar_note" ng-show="{{tmpBar.note==5}}">★★★★★</p>
        </div>
    </a>
</div>

app.controller("barsControleur", function ($scope, $rootScope, $route) {

    $rootScope.listeBars = [
      {"nom":"Milton Pub","note":"4","geolocation":{"lat":"45.8982901","long":"6.1223147"}},
      {"nom":"Captain Pub","note":"4","geolocation":{"lat":"45.8984964","long":"6.1235909"}},
      {"nom":"Le Grand Café","note":"2","geolocation":{"lat":"45.8983107","long":"6.121416"}}
    ];

    $route.reload();
});

<div class="col-xs-12">
    <h1>{{barLocal.nom}}</h1>
    <div class="barLocal_note" ng-show="{{barLocal.note==0}}">☆☆☆☆☆</div>
    <div class="barLocal_note" ng-show="{{barLocal.note==1}}">★☆☆☆☆</div>
    <div class="barLocal_note" ng-show="{{barLocal.note==2}}">★★☆☆☆</div>
    <div class="barLocal_note" ng-show="{{barLocal.note==3}}">★★★☆☆</div>
    <div class="barLocal_note" ng-show="{{barLocal.note==4}}">★★★★☆</div>
    <div class="barLocal_note" ng-show="{{barLocal.note==5}}">★★★★★</div>
    <div id="conteneurCarte-{{ barLocal.index }}"></div>
    <div id="conteneurCarte"></div>
</div>

app.controller("afficherBarControleur", function ($scope, $rootScope, $routeParams) {

    //Bar local
    $scope.barLocal = $rootScope.listeBars[$routeParams.index];
    $scope.barLocal.index = $routeParams.index;

    //Récupération de la carte via GoogleAPI
    $scope.recupereCarteGoogleAPI = function () {
        console.log('conteneurCarte-' + $scope.barLocal.index);
        $("#conteneurCarte-" + $scope.barLocal.index).css({ "width": "300px", "height": "300px", "background-color": "lightgrey" });
        $("#conteneurCarte").css({ "width": "300px", "height": "300px", "background-color": "green" });
    }

    if ($scope.barLocal.geolocation) {
        $scope.recupereCarteGoogleAPI();
    }

});