CODEWITHSUNDEEP
javascripthtmlangularjsopendatasoft
Pierre Capon
Pierre Capon

Reputation: 143

My page turns blank when I try to use a controller in angular

I have a problem with angular to integrate a controller to my page. The page becomes blank as soon as I try to integrate it.

        <div class="container-fluid" ng-app="ods-widgets" ng-controller="myCtrl" >
          <ods-dataset-context context="cont" cont-domain="https://data.rennesmetropole.fr" cont-dataset="{{dataset}}">
          </ods-dataset-context>
        </div>

<script>    
  var app = angular.module("ods-widgets", []);

  app.controller("myCtrl", function($scope) {
    $scope.dataset= "statistiques-de-frequentation-du-site-rennes-metropole-en-acces-libre";
  });
</script>

Without the controller: http://jsfiddle.net/5c0xr8f4/13/

With the controller: http://jsfiddle.net/8796ueyL/

ods-dataset-context is a component (https://github.com/opendatasoft/ods-widgets). it's a component that I import via CDN.

I just want to control what is inside the cont-dataset

Upvotes: 1

Views: 104

Answers (1)

David Meza
David Meza

Reputation: 3180

I looked into the library that you mentioned in your comment. It seems that the issue is that ods-widgets is already an angular module that is being imported via the CDN. If you name your own angular module with the same name, you are effectively overwriting this existing module that you have imported. So what you want to do is declare your own angular module and import ods-widgets as a dependency. You can take a look at the Fiddle for a working sample, but the important part is this one:

angular.module("myApp", ['ods-widgets']);

And in your HTML update the ng-app reference:

<div class="container-fluid" ng-app="myApp" ng-controller="myCtrl" >

Upvotes: 2

Related Questions