Question

在一个指令中我想要一个控制器，但是我得到了无法找到控制器的错误。我确信这是一件小事，也许我不想这样做。

angular.module('myApp', []);

angular.module('myApp').controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
  
  //some function here returning data
}]);

angular.module('myApp').directive('yoloswag', function() {
  return {
    require: ['^?ngModel', '^GreetingController'],
    restrict: 'A',
    scope: {
    },
    link: function(scope, element, attrs, controllers) {
      
      var modelCtrl = controllers[0],
          greetingsCtrl = controllers[1];
      
      console.log(controllers)
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="GreetingController">
    {{ greeting }}
    <div yoloswag>test</div>
</div>
  
</div>

我做错了什么？

非常感谢你！

Answer 1

您的代码没有和您的主模块相关，这就是您收到该错误的原因。

您的代码应为以下

angular.module('myApp', [])
.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';

  //some function here returning data
}])
.directive('yoloswag', function() {
  return {
    require: ['^?ngModel', '^GreetingController'],
    restrict: 'A',
    scope: {
    },
    link: function(scope, element, attrs, controllers) {

      var modelCtrl = controllers[0],
          greetingsCtrl = controllers[1];

      console.log(controllers)
    }
  };
});

或为主模块设置变量，然后您可以使用主模块添加控制器和指令，如

 var MainModule = angular.module('myApp', []);

    MainModule.controller('GreetingController', ['$scope', function($scope) {
      $scope.greeting = 'Hola!';

      //some function here returning data
    }]);
    MainModule.directive('yoloswag', function() {
      return {
        require: ['^?ngModel', '^GreetingController'],
        restrict: 'A',
        scope: {
        },
        link: function(scope, element, attrs, controllers) {

          var modelCtrl = controllers[0],
              greetingsCtrl = controllers[1];

          console.log(controllers)
        }
      };
    });

Answer 2

您可以使用指令的controller属性：

确保不要更新链接功能中的属性。

return {
    restrict: 'A',
    scope: {
    },
    controller : 'GreetingController',
    link: function(scope, element, attrs) {

      var modelCtrl = controllers[0],
          greetingsCtrl = controllers[1];

      console.log(controllers)
    }
  };

使用require从指令访问角度控制器

2 个答案: