Question

这是问题所在，我试图通过使用指令渲染子标题来拆分我的html。

在子标题中，我正在做一些逻辑来渲染一些按钮。用于此的所有逻辑都在此视图的控制器中编码。

所以我写了一个指令来为我的子标题创建一个元素：

 angular.module('myApp')
  .directive('subHeader', ['ServiceOne','ServiceTwo',
  function(ServiceOne, ServiceTwo){
    return{
      restrict: 'E',
      require: '^MyCtrl',
      link: function(scope, element, attrs, ctrl){
          console.log(ctrl);

         // Logic for buttons in sub header

      },
      templateUrl: '--here my path to the .html template--'
    };
  }]);

html模板在视图中很好地呈现，所以我尝试在链接方法中移动子标题中存在的逻辑的函数。但我无法记录现有的控制器。

我只是想补充说我需要控制器，因为子标头中的逻辑取决于该控制器重新检索的数据。

我缺少什么或我做错了什么？

Answer 1

在指令中我们使用＆＃34; controller＆＃34;和＆＃34; controllerAs＆＃34;不是＆＃34;要求＆＃34;。＆＃34;控制器＆＃34; - 字符串或控制器功能本身中控制器的实际名称。＆＃34; controllerAs＆＃34; - 您可以在html视图中使用的控制器的别名

 angular.module('myApp')
  .directive('subHeader', ['ServiceOne','ServiceTwo',
   function(ServiceOne, ServiceTwo){
    return{
      restrict: 'E',
      controller: 'MyCtrl',
      link: function(scope, element, attrs, ctrl){
        console.log(ctrl);

        // Logic for buttons in sub header

       },
       templateUrl: '--here my path to the .html template--'
    };
 }]);

 angular.module('myApp').controller("MyCtrl", function($scope){
    //Do your stuff
 });

OR

angular.module('myApp')
  .directive('subHeader', ['ServiceOne','ServiceTwo',
   function(ServiceOne, ServiceTwo){
    return{
      restrict: 'E',
      controller: function($scope)(){
       // Do your stuff
      },
      controllerAs: 'MyCtrl',
      link: function(scope, element, attrs, ctrl){
        console.log(ctrl);

        // Logic for buttons in sub header

       },
       templateUrl: '--here my path to the .html template--'
    };
 }]);

Angular指令控制器找不到require

1 个答案: