CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Marek
Marek

Reputation: 317

UI Bootstrap custom directive controller is not a function

I want to use UI Bootstrap Collapse in my custom directive <collapse>

However, I get this Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined

Here is my Plunkr

What am I doing wrong?

Upvotes: 0

Views: 80

Answers (3)

Artem
Artem

Reputation: 833

Remove ng-controller from template. Define controller inline:

controller: ['$scope', function($scope){
    $scope.isCollapsed = false;
  }]

Plunk

Another option is to define controller:

.controller('CollapseDemoCtrl', function($scope){
  $scope.isCollapsed = false;
});

and refer to it in directive: controller: 'CollapseDemoCtrl'

Plunk

Upvotes: 1

Suresh B
Suresh B

Reputation: 1652

angular.module('myApp.collapse', []);
angular.module('myApp', [
  'ngAnimate',
  'myApp.collapse',
  'ui.bootstrap'
]);

(function(){
  'use strict';
  
angular.module('myApp.collapse',[])
.controller('CollapseDemoCtrl', CollapseDemoCtrl)
.directive('collapse', function(){
    return {
      restrict: 'E',
      templateUrl: 'collapse.html',
      controller: 'CollapseDemoCtrl' 
    };
  });
  function CollapseDemoCtrl($scope){
    $scope.isCollapsed = false;
  }

  
})();
<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <script src="app.js"></script>
    <script src="collapse-module.js"></script>
    <script src="collapse-directive.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <collapse></collapse>
    
  </body>
</html>


<div>
	<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
	<hr>
	<div uib-collapse="isCollapsed">
		<div class="well well-lg">Some content</div>
	</div>
</div>

Upvotes: 1

Nelson
Nelson

Reputation: 383

angular.module('myApp.collapse', []);


angular.module('myApp', [
  'ngAnimate',
  'myApp.collapse',
  'ui.bootstrap'
]);


(function(){
  'use strict';
  
  angular.module('myApp.collapse').
  directive('collapse',['$http', function($http){
   
   
   
    console.log("Test")
    return {
      restrict: 'E',
      templateUrl: 'collapse.html',
      controller: function ($scope) {
     $scope.isCollapsed = false; 
      }
    }; 
   
}]); 


		
   
  
})();
<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <script src="app.js"></script>
    <script src="collapse-module.js"></script>
    <script src="collapse-directive.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <collapse></collapse>
    
  </body>
</html>



<div>
	<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
	<hr>
	<div uib-collapse="isCollapsed">
		<div class="well well-lg">Some content</div>
	</div>
</div>

Upvotes: 0

Related Questions