Question

我有这个模板：

<ion-view view-title="MAP" name="tab-map">
    <ion-content has-tabs="true" style="text-align:center;">
        <div style="width:100%;height:400px;" ng-attr-id="{{'canvas_map_'+place.id}}"></div>
    </ion-content>
</ion-view>

我试图通过控制器动态设置div的内容：

angular.module('helloDynamicMap', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

    $ionicConfigProvider.navBar.alignTitle('center');
    $ionicConfigProvider.tabs.position('bottom');
    $ionicConfigProvider.backButton.text('').icon('ion-chevron-left');
    $ionicConfigProvider.backButton.previousTitleText(false);

    $stateProvider

        .state('main', {
        url: "/main",
        controller: "PlacesCtrl",
        //abstract: true,
        templateUrl: 'templates/main.html',
        resolve: {
            resultPlaces: function (findPlace, $stateParams) {
                return findPlace.all();
            }
        }
    })

    .state('place', {
        url: "/place/:placeId",
        //abstract: true,
        templateUrl: 'templates/place-tabs.html',
        controller: 'PlaceCtrl',
        resolve: {
            resultPlace: function (findPlace, $stateParams) {
                return findPlace.get($stateParams.placeId);
            }
        }
    })

    .state('place.details', {
        url: '/details',
        views: {
            'tab-details': {
                templateUrl: 'templates/details.html'
            },
        }
    })

    .state('place.map', {
        url: '/map',
        views: {
            'tab-map': {
                templateUrl: 'templates/map.html' //,
                    //controller: "MapCtrl"
            }
        }
    });

    $urlRouterProvider.otherwise("/main");

})

.controller('AppCtrl', function ($scope, $state, $rootScope) {

    // button back
    $scope.goBack = function () {
        console.log("back button");
        $state.go("main");
    }

})

.controller('PlacesCtrl', function ($scope, $rootScope, $state, resultPlaces) {

    // Get places
    $scope.places = resultPlaces;

    // Button back
    $scope.goTabs = function () {
        $state.go("tab.map");
    }

})
.controller('PlaceCtrl', function ($scope, $rootScope, $state, resultPlace) {

    // Load place's data in scope's model
    $scope.place = resultPlace;

    var div = document.getElementById("canvas_map_" + resultPlace.id);
    console.log("div", div);    

    // Create Map
    var map;
    document.addEventListener("deviceready", function () {
        var div = document.getElementById("canvas_map_" + resultPlace.id);

        // Initialize the map view
        map = plugin.google.maps.Map.getMap(div);

        // Wait until the map is ready status.
        map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
    }, false);

    function onMapReady() {
        var button = document.getElementById("button_" + resultPlace.id);
        button.addEventListener("click", onBtnClicked, false);
    }

    function onBtnClicked() {
        map.showDialog();
    }

})

.factory('findPlace', function ($q) {

    // list all places

    var places = [];
    places = [{
        id: "1",
        name: "Place A",
        details: "details for Place A",
        latitude: "28.472143",
        longitude: "-81.469856"
    }, {
        id: "2",
        name: "Place B",
        details: "details for Place B",
        latitude: "",
        longitude: ""
    }, {
        id: "3",
        name: "Place C",
        details: "details for Place C",
        latitude: "",
        longitude: ""
    }];

    return {
        all: function () {
            var dfd = $q.defer();
            // resolve promise
            dfd.resolve(places);

            // return promise
            return dfd.promise;
        },

        get: function (placeId) {
            for (var i = 0; i < places.length; i++) {
                if (places[i].id == parseInt(placeId)) {
                    return places[i];
                }
            }
            return null;
        }
    }
})

当我使用静态id名称为“canvas_map_01”时，此代码可以正常工作，但是当我尝试通过范围变量设置它时，它不起作用。

主要问题是如何通过动态ID名称设置和处理div元素：

// Load place's data in scope's model
$scope.place = resultPlace;

var div = document.getElementById("canvas_map_" + resultPlace.id);
console.log("div", div);

我的完整代码在Github，有人可以告诉我，我做错了什么？

Answer 1

- 改变你的HTML

NG-ATTR-ID =＆＃34; {{＆＃39; canvas_map _＆＃39 + place.id}}＆＃34;

要

ID =＆＃34; {{＆＃39; canvas_map _＆＃39 + place.id}}＆＃34;

- 更改您的代码 var div = document.getElementById（＆＃34; canvas_map _＆＃34; + resultPlace.id）;

要

var div = angular.element（＆＃34; #canvas_map _＆＃34; + resultPlace.id）;

比它能正常工作

动态ID名称

1 个答案: