我想在我的自定義指令使用UI Bootstrap Collapse<collapse>
UI引導定製指令控制器不是一個函數
不過,我得到這個Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined
這裏是我的Plunkr
我在做什麼錯?
我想在我的自定義指令使用UI Bootstrap Collapse<collapse>
UI引導定製指令控制器不是一個函數
不過,我得到這個Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined
這裏是我的Plunkr
我在做什麼錯?
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>
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>
(函數(){ '使用嚴格'; 變種應用= angular.module( 'myApp.collapse',[]); app.controller( 'CollapseDemoCtrl',CollapseDemoCtrl); app.directive('崩」,函數(){ 返回{ 限制: 'E', templateUrl: 'collapse.html', 控制器: 'CollapseDemoCtrl' }; }); 函數CollapseDemoCtrl($範圍){$ 範圍。 isCollapsed = false; } })(); –
你沒有定義控制器。你需要像這樣定義(app.controller('CollapseDemoCtrl',CollapseDemoCtrl);) –
舊:控制器:CollapseDemoCtrl現在控制器:'CollapseDemoCtrl' –
我真的需要定義控制器內聯嗎?沒有其他辦法嗎? – Marek
[plunk]中的另一種方法(http://plnkr.co/edit/BT3cO1UzqBXMB8TEwcrM?p=preview) – Artem
這很酷,但我不明白爲什麼我的方法不起作用。爲什麼它不通過我的控制器到指令? – Marek