AngularJS中的控制器/指令继承

Controller/Directive inheritance in AngularJS

本文关键字：指令 继承 控制器 AngularJS      更新时间：2023-09-26

我很难理解如何从指令继承父控制器。我设置了一个非常简单的例子，包括一个名为MainCrtl的控制器。该控制器负责创建和删除一个名为inner的指令数组。问题是，我希望能够从我的指令中访问MainCtrl的方法，但我从浏览器控制台收到了一个错误。这是代码：

app.js

angular
  .module('myApp', ['ngRoute'])
  .config(function($routeProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      });
  });

脚本/控制器/main.js

angular.module('myApp')
  .controller('MainCtrl', function () {
    var self = this;
    var index = 1;
    this.inners = [];
    this.init = function() {
      self.addInner();
    };
    this.addInner = function(){
      self.inners.push({
        name: 'Inner ' + index
      });
      index++;
    };
    this.init();
  });

views/main.html

<p>main</p>
<button type="button" ng-click="main.addInner()">Add Inner</button>
<inner ng-repeat="inner in main.inners" data="inner"></inner>

scripts/directives/inner.js

angular.module('myApp')
  .directive('inner', function(){
    return {
      restrict: 'E',
      templateUrl: 'inner.html',
      require: ['^MainCtrl', 'inner'],
      controllerAs: 'inner',
      bindToController: true,
      scope: {
        data: '='
      },
      controller: function(){ ... },
      link: function(scope, element, attrs, ctrls){ ... }
    }
  });

这是我从浏览器控制台得到的错误

[$compile:ctreq] Controller 'MainCtrl', required by directive 'inner', can't be found!

我在这里创建了一个plunker。请帮忙。

因此，指令不可能具有您所想的那种父控制器，指令实际上具有父指令。如果你指定的话，每个指令都可以有一个控制器

如果html中是这样的话，那么一个指令就是另一个指令的父指令。

<div parent-directive>
    <div child-directive></div>
</div>

在父指令的控制器中，您需要定义要在this上访问的任何内容。

然后require: 'parent-directive'和link: function (scope, element, attrs, parent)

将require设置为数组将导致数组被传递到链接函数中。可选控制器可能为空。

注意，您也可以引用同级指令。但是你不能引用你自己（也就是同样的例子）。

相关文章：