AngularJS中的控制器/指令继承

Question

我无法理解如何从指令继承父控制器。我已经设置了一个非常简单的示例，其中包含一个名为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(); 
    }); 

视图/ 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> 

脚本/指令/内.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){ ... } 
    } 
    }); 

这是我从我创建了一个plunker here浏览器控制台

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

得到错误。请帮忙。

Answer 1

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

指令是另一个父指令，如果是在html中的情况。

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

在父指令的控制器，你需要定义任何你想在this访问。

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

设置require到阵列将导致在阵列中被传递到链接功能。可选控制器可能为空。

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