[英]UI Bootstrap custom directive controller is not a function
我想在我的自定義指令<collapse>使用UI Bootstrap Collapse
但是，我收到此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',[]) .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>
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>
從自定義指令內部調用angular UI Bootstrap指令
[英]Call angular UI Bootstrap directive from inside custom directive
UI Bootstrap模態窗口破壞了AngularJS自定義指令
[英]AngularJS custom directive breaking with UI Bootstrap modal window
創建自定義指令並使用UI-bootstrap時出現錯誤“多指令資源爭用”
[英]Error 'Multiple Directive Resource Contention' when creating custom directive and using UI-bootstrap
訪問angularjs中自定義指令內控制器中定義的函數
[英]Accessing a function defined in a controller inside a custom directive in angularjs
Angular - 需要ngModel並在自定義指令的控制器中使用它，而不是鏈接功能
[英]Angular - Requiring ngModel and using it in controller of custom directive, not link function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.