UI引導定製指令控制器不是一個函數

我想在我的自定義指令使用UI Bootstrap Collapse<collapse>UI引導定製指令控制器不是一個函數

不過，我得到這個Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined

這裏是我的Plunkr

我在做什麼錯？

2016-01-21 Marek

從模板移除ng-controller。定義控制器直列：

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

Plunk

另一種選擇是定義控制器：

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

，並且是指在它的指令：controller: 'CollapseDemoCtrl'

Plunk

來源

2016-01-21 13:40:43 Artem

我真的需要定義控制器內聯嗎？沒有其他辦法嗎？ – Marek

[plunk]中的另一種方法（http://plnkr.co/edit/BT3cO1UzqBXMB8TEwcrM?p=preview） – Artem

這很酷，但我不明白爲什麼我的方法不起作用。爲什麼它不通過我的控制器到指令？ – Marek

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; 
 
     } 
 
    }; 
 
    
 
}]); 
 

 

 
\t \t 
 
    
 
    
 
})();

<!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> 
 
\t <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
 
\t <hr> 
 
\t <div uib-collapse="isCollapsed"> 
 
\t \t <div class="well well-lg">Some content</div> 
 
\t </div> 
 
</div>

來源

2016-01-21 13:35:52 Nelson

你爲什麼需要'$ http'？ – Marek

現在不需要。將來，如果任何json或服務器調用都可以使用它。 – Nelson

好的，但這仍然不能回答關於控制器功能不是函數的錯誤。 – Marek

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> 
 
\t <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
 
\t <hr> 
 
\t <div uib-collapse="isCollapsed"> 
 
\t \t <div class="well well-lg">Some content</div> 
 
\t </div> 
 
</div>

來源

2016-01-21 13:49:13

（函數（）{ '使用嚴格'; 變種應用= angular.module（ 'myApp.collapse'，[]）; app.controller（ 'CollapseDemoCtrl'，CollapseDemoCtrl）; app.directive（'崩」，函數（）{ 返回{ 限制： 'E'， templateUrl： 'collapse.html'，控制器： 'CollapseDemoCtrl' }; }）; 函數CollapseDemoCtrl（$範圍）{$ 範圍。 isCollapsed = false; } }）（）; –

你沒有定義控制器。你需要像這樣定義（app.controller（'CollapseDemoCtrl'，CollapseDemoCtrl）;） –

舊：控制器：CollapseDemoCtrl現在控制器：'CollapseDemoCtrl' –

UI引導定製指令控制器不是一個函數

回答

相關問題