=============================================== ==

Question

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

我在应用中有3个页面：

显示所有酒吧： pubList.html
添加pub： addPub.html
显示一个酒吧详细信息： pubDetail.html

只需单击元素，即可从 pubList 导航到 pubDetail 。 pubDetail 控制器使用$ routeParams获取pub索引。

我的目标是使用存储的coordonates显示显示pub所在位置的googleMaps。问题是，如果第一个酒吧显示完美，第二个（当回到 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>

使用代码浏览器，我确认div Id已正确设置（mapContainer-0，mapContainer-1，...）但是，当我尝试在这个div上使用jQuery Selector时，它不起作用。我的理论是当男女同校到达选择器时，div ID尚未设置，但是失败了。我的jQuery选择器如下：

$("#mapContainer-" + $scope.localPub.index).css({ "width": "300px", "height": "300px", "background-color": "lightgrey" });

顺便说一句，如果我的jQuery选择器失败，那么google maps instanciation也会失败：

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

有没有人知道如何与这个div互动？

=============================================== ==

编辑：这是 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>

app.js

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

app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            "templateUrl": "vues/bars.html",
            "controller": "barsControleur"
        })
        .when("/ajouteBar", {
            "templateUrl": "vues/ajouterBar.html",
            "controller": "ajouterBarControleur"
        })
        .when("/bar/:index", {
            "templateUrl": "vues/afficherBar.html",
            "controller": "afficherBarControleur"
        })
        .otherwise({ "redirectTo": "/" });
});

//Gestionnaire d'erreur
function errorHandler(pMessage) {
    return function () { console.log(pMessage); }
}

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

<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>

pubList控制器，在此处命名 barsControleur

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();
});

pubDetail视图，在此处命名 afficherBar

<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>

pubDetail controler，在这里命名为 affiherBarControleur ，故障代码

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();
    }

});

console.log运行良好，但.css（）不起作用。

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

=============================================== ==

0 个答案: