Several containers are created on the page using a directive, and each container is substituted with an id, and a new Map searches for the container c id and creates a world map in it using canvas and KineticJS . Maps on the page can be several. And the problem is that if we replace the id = {{wId}} substitution in the directive with a hard-coded value, everything works out, but with the substitute id's it does not work.

Error: a is null ._buildDOM @ http: \\ localhost: 4000 / vendor / graphics / kinetic / v4.7.0 / kinetic-v4.7.0.min.js: 3: 27637 .___ init @ http: \\ localhost: 4000 / vendor / graphics / kinetic / v4.7.0 / kinetic-v4.7.0.min.js: 3: 21801 Kinetic.Stage @ http: \\ localhost: 4000 / vendor / graphics / kinetic / v4.7.0 / kinetic-v4.7.0 .min.js: 2: 652 Map / this.draw @ http: \\ localhost: 4000 / scripts / map.canvas.js: 821: 22 map_link_handler @ http: \\ localhost: 4000 / app / modules / widgets / metrics .widgets.js: 236: 13 cloneAndAnnotateFn / <@ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 8835: 41 invokeLinkFn @ http: \\ localhost: 4000 / vendor / angular / angular -1.4.8.js: 8841: 9 nodeLinkFn @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 8335: 1 compositeLinkFn @ http: \\ localhost: 4000 / vendor / angular / angular -1.4.8.js: 7731: 13 compositeLinkFn @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 7734: 13 publicLinkFn @ http: \\ localhost: 4000 / vendor / angular / angular -1.4.8.js: 7611: 30 createBoundTranscludeFn / boundTranscludeFn @ http: \\ localhost: 4000 / vendor / angular / a ngular-1.4.8.js: 7749: 1 controllersBoundTransclude @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 8362: 18 ngSwitchWatchAction / <@ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 28147: 13 forEach @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 340: 11 ngSwitchWatchAction @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 28146: 11 $ RootScopeProvider / this. $ gethttp: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 15896: 23 $ RootScopeProvider / this. $ gethttp: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 16160: 13 done @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 10589: 36 completeRequest @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 10787: 7 requestLoaded @ http: \\ localhost: 4000 / vendor / angular / angular-1.4.8.js: 10728: 1

function m_widget() { return { name: 'mWidget', replace: true, restrict: 'E', transclude: true, templateUrl: '/app/modules/widgets/directives/templates/m-widget.html', scope: { wId: '@', wType: '@', wData: '=' }, link: function(scope, element, attrs) { scope.wTitle = titleFromType(scope.wType); // Get widget title from widget type function titleFromType(type) { // ... } } } } map_widget.$inject = ['$compile']; function map_widget($compile) { return { replace: true, restrict: 'E', template: '<div id="{{ wId }}"></div>', scope: { wId: '@on' }, link: map_link_handler }; function map_link_handler(scope, element, attrs) { var parent = element.parent().get(0); element.css({ width: parent.clientWidth, height: parent.clientWidth * 0.7 }); var map = new Map(attrs['id'], '', { zoom: 'WORLD' }); map.draw(); } } 
 <m-widget ng-repeat="widget in widgets" w-id="{{ widget.id }}" w-type="{{ widget.type }}" w-data="widget.data"></m-widget> <!-- m-widget --> <div class="panel panel-default box" m-draggable> <div class="panel-heading">{{ wTitle }}</div> <ng-switch on="wType"> <div class="panel-body" ng-switch-when="map"> <m-widget-map on="{{ wId }}"></m-widget-map> </div> <div class="panel-body" ng-switch-when="pie">PIE</div> <div class="panel-body" ng-switch-when="hbar">HBar</div> <div class="panel-body" ng-switch-when="vbar">VBar</div> <div class="panel-body" ng-switch-when="list"> <ul> <li ng-repeat="item in wData">{{ item.country }}</li> </ul> </div> <div class="panel-body" ng-switch-when="dial">Dial</div> <div class="panel-body" ng-switch-when="table">Table</div> <div class="panel-body" ng-switch-when="label">Lable</div> <div class="panel-body" ng-switch-when="number">Number</div> </ng-switch> </div>

  • If you yourself have found the answer to your question, it is worth making it in the form of an answer - Grundy

1 answer 1

The solution was generally simple. Instead of substituting id = "{{wId}}" into template directives. It is necessary to put the substitution in the link directive - element.attr ('id', 'canvasID) .