当我尝试以角度使用控制器时，我的页面变成空白

Question

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

Answer 1

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