多边形地图和Angular.js

Question

I'm trying to add a polymaps map inside an angularjs app.

TypeError: Object [object Object] has no method 'setAttribute'
at Object.a.container (http://localhost:8000/lib/polymaps.min.js:15:341)
at new <anonymous> (http://localhost:8000/js/controllers.js:22:4)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:335)
at Object.instantiate
(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:464)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:486
at link (http://localhost:8000/lib/angular-route.min.js:7:248)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:492)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:45:200
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:431 <div ng-view="" class="ng-scope">

Javascript is not able to setAttribute on an element inside my angular view?

My html looks like this:

<article class="dashboard container">
    <div id="map"></div>
</article>

And the basic polymaps code is:

var po = org.polymaps;

var map = po.map()
    .container(document.getElementById("map").appendChild(po.svg("svg")))
    .add(po.interact())
    .add(po.hash());
    .add(po.image().url(
      po.url("http://{S}tile.openstreetmap.org" + "/{Z}/{X}/{Y}.png")
      .hosts(["a.","b.","c.",""])))
    .center({lat:  -33.882957, lon: 151.073685})
    .zoom(11);

I'm assuming this is angular. Is there any work around?

Answer 1

To answer my own question I had to do two things to make it work in Angular.js.

The first, to solve this problem was to wrap the #map element as I did. It turns out my caching was keeping this error from when I had the #map element as the only element in my view. (So I had the right Idea, deleting cache removed the error)

Since polymaps uses a #{zoom}/{coordinateX}/{coordinateY} routing, the second thing was to add:

$locationProvider.html5Mode(true);

To my app.js file to remove the /#/ in my routes. Otherwise, angular and polymaps undertook an infinite battle over the url.