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?
Add a comment
|
3 Answers
Remove ng-controller from template.
Define controller inline:
controller: ['$scope', function($scope){
$scope.isCollapsed = false;
}]
Another option is to define controller:
.controller('CollapseDemoCtrl', function($scope){
$scope.isCollapsed = false;
});
and refer to it in directive: controller: 'CollapseDemoCtrl'
4 Comments
Marek
do I really need to define the controller inline? Is there no other way?
Marek
It's all cool, but I don't understand why my approach isn't working. Why won't it pass my controller to the directive?
Artem
You did not define a controller, just added a function.
Marek
can you post the plunk from your comment as an answer, cause this is the one providing an answer to my question?
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>
4 Comments
Suresh B
(function(){ 'use strict'; var app = angular.module('myApp.collapse',[]); app.controller('CollapseDemoCtrl', CollapseDemoCtrl); app.directive('collapse', function(){ return { restrict: 'E', templateUrl: 'collapse.html', controller: 'CollapseDemoCtrl' }; }); function CollapseDemoCtrl($scope){ $scope.isCollapsed = false; } })();
Suresh B
your not define the controller. u need to define like this(app.controller('CollapseDemoCtrl', CollapseDemoCtrl);)
Suresh B
old : controller: CollapseDemoCtrl now controller: 'CollapseDemoCtrl'
Marek
your answer helped, thank you. Although Artem answered my question most precisely.
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> 
