Question

我想在自定义指令<collapse>

但是，我得到了Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined

这是我的Plunkr

我做错了什么？

Answer 1

从模板中删除ng-controller。控制器内联定义：

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

Plunk

另一种选择是定义控制器：

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

并在指令中引用它：controller: 'CollapseDemoCtrl'

Plunk

Answer 2

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>

Answer 3

＆＃13;

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

＆＃13;

<!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>

＆＃13;

UI Bootstrap自定义指令控制器不是函数

3 个答案: