AngularJS中的控制器/指令繼承

我無法理解如何從指令繼承父控制器。我已經設置了一個非常簡單的示例，其中包含一個名爲MainCrtl的控制器。該控制器負責創建和刪除一系列名爲inner的指令。事情是，我希望能夠從我的指令中訪問MainCtrl的方法，但我從瀏覽器控制檯收到錯誤。下面是代碼：AngularJS中的控制器/指令繼承

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!

得到錯誤。請幫忙。

來源

2015-02-10 David Barreto

所以一個指令不能有你想要的那種父控制器，一個指令實際上有父指令。如果你指定它，每個指令都可以有一個控制器。

指令是另一個父指令，如果是在html中的情況。

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

在父指令的控制器，你需要定義任何你想在this訪問。

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

設置require到陣列將導致在陣列中被傳遞到鏈接功能。可選控制器可能爲空。

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

來源

2015-02-10 05:50:14

嗯這就是我害怕的，似乎我應該創建一個新的指令來分享功能。但我必須說我不同意你的最後一句話，一個指令實際上可以在require屬性中引用它自己。我知道是無關的，但是，你怎麼能引用一個兄弟指令的控制器？ – 2015-02-10 06:06:06

爲了澄清，指令實例不能引用它自己。但是兩個相同類型的指令實例可以。 – 2015-02-10 06:47:13

您也可以使用require來引用同級。用'^'來引用一個父母或兄弟姐妹，只把它留給兄弟姐妹。 '？'將使其成爲可選。我認爲'^^'只是父母，但沒有記錄..不記得他們是否添加了它。 – 2015-02-10 06:55:05

AngularJS中的控制器/指令繼承

回答

相關問題