AngularJs 'TabsCtrl' is not a function, got undefined .Net

Question

AngularJs 'TabsCtrl' is not a function, got undefined .Net

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I was taking an internet example of how to create SPA, but I'm stuck, the issue is that it uses some modules , which are nested and create controls with dependency towards modules , the problem is that I can not use the dependencies of ui.bootstrap , or something I'm not understanding well, I tried to abstract the codes that give me error, but I can not solve it.

Code:

var commonModule = angular.module('common',['ngAnimate', 'ngSanitize', 'ui.bootstrap']);    

var mainModule = angular.module('main', ['common']);

var customerModule = angular.module('customer', ['common']);

customerModule.controller('TabsCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      $window.alert('You\'ve selected the alert tab!');
    });
  };

  $scope.model = {
    name: 'Tabs'
  };
});

<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<!doctype html>
<html data-ng-app="main" lang="en ng-app"> 
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div data-ng-controller="TabsCtrl">
  <p>Select a tab by setting active binding to true:</p>
 

  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
  </uib-tabset>

  <hr />

 

  <uib-tabset active="activeJustified" justified="true">
    <uib-tab index="0" heading="Justified">Justified content</uib-tab>
    <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
  </uib-tabset>

  <hr />


  <hr />

</div>
  </body>
</html>

javascript html5 angularjs

asked by Cesar Perez Ramirez 17.10.2016 в 21:54

source

2 answers

1

On the one hand, you are adding the controller TabsCtrl to the module customer .

But you're instantiating the ng-app main .

Replace the name of the app in the <html> tag.

<html data-ng-app="customer" lang="en ng-app">

answered by 17.10.2016 в 22:29

Error saving to a mySQL table with JPA Error http 405 on Android

score 1 · Accepted Answer

This is a diagram of your modules, maybe you have a better idea of what is happening. The arrows indicate who depends on whom.

The module marked in blue main is the one you are using to bootstrap the application with ng-app and it only depends on the module common in light blue.

Your controller TabsCtrl is declared in the module customer and this of course is never loaded since according to your dependencies only main and common are used by the application; customer is declared but never merged with anyone.

When you declare that a module depends on another module, what you are doing is that all the controllers, directives and other structures that belong to that module are also available in the module you are referring to.

The solution is simple, declares customer as a dependency of main

var mainModule = angular.module('main', ['common', 'customer']);

This is the result

Now main has access to TabsCtrl .

Check the snippet.

var commonModule = angular.module('common', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

var mainModule = angular.module('main', ['common', 'customer']);

var customerModule = angular.module('customer', ['common']);

customerModule.controller('TabsCtrl', function($scope, $window) {
  $scope.tabs = [{
    title: 'Dynamic Title 1',
    content: 'Dynamic content 1'
  }, {
    title: 'Dynamic Title 2',
    content: 'Dynamic content 2',
    disabled: true
  }];

  $scope.alertMe = function() {
    setTimeout(function() {
      $window.alert('You\'ve selected the alert tab!');
    });
  };

  $scope.model = {
    name: 'Tabs'
  };
});

form.tab-form-demo .tab-pane {
  margin: 20px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div data-ng-app="main">
  <div data-ng-controller="TabsCtrl">
    <p>Select a tab by setting active binding to true:</p>
    <uib-tabset active="active">
      <uib-tab index="0" heading="Static title">Static content</uib-tab>
      <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
        {{tab.content}}
      </uib-tab>
      <uib-tab index="3" select="alertMe()">
        <uib-tab-heading>
          <i class="glyphicon glyphicon-bell"></i> Alert!
        </uib-tab-heading>
        I've got an HTML heading, and a select callback. Pretty cool!
      </uib-tab>
    </uib-tabset>
    <hr />
    <uib-tabset active="activeJustified" justified="true">
      <uib-tab index="0" heading="Justified">Justified content</uib-tab>
      <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
      <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
    </uib-tabset>
    <hr />
    <hr />
  </div>
</div>