模板中的指令訪問控制器

Question

我有幾個非常相似的指令共享一些代碼。我正在尋找一種方法讓這些指令繼承該共享代碼。

我正在考慮的方法是讓每個指令的模板包含另一個帶有共享代碼的指令。有什麼方法可以訪問該模板的指令控制器？

app.directive('d1', function($compile) { 
    return { 
    restrict: 'E', 
    require: 'sharedCtrl', // Is anything like this possible? 
    template: '<shared></shared>', 
    link:function(scope,element,attr, sharedCtrl) { 
     var res = sharedCtrl.getResult(); 
    } 
    } 
}); 
app.directive('shared', function($compile) { 
    return { 
    restrict: 'E', 
    controller: function($scope, $element) { 
     var resultObject = sharedCode(); 
     this.getResult = function() { return resultObject; }; 
    } 
    link:function(scope,element,attr, sharedCtrl) { 

    } 
    } 
}); 

或者，還有更好的方法來實現同樣的事情嗎？

編輯：共享代碼操縱DOM（它會注入一個傳單地圖，並且我想返回地圖的js對象），所以我認爲最好是在指令中保留DOM操作。

Answer 1

我現在在指令模塊中添加一個函數來執行共享DOM操作。

function sharedFoo(element) { 
    // DOM manipulation on element 
    return result; 
} 

app.directive('d1', function($compile) { 
    return { 
    restrict: 'E', 
    link:function(scope,element,attr, sharedCtrl) { 
     var res = sharedFoo(); 
    } 
    } 
}); 

工作正常，但我不知道它跟隨或破壞了角度約定。

Answer 2

這正是服務的目的。

將您的共享指令轉變爲服務並將其注入到第一個服務中。

app.directive('d1', function($compile, shared) { 
    return { 
    restrict: 'E', 
    template: '<shared></shared>', 
    link:function(scope,element,attr) { 
     var res = shared.getResult(); 
    } 
    } 
}); 
app.factory('shared', function($compile) { 
    var resultObject = sharedCode(); 
    return { 
    getResult: function() { return resultObject; }; 
    } 
});