Angularjs 2个具有不同模板的相同指令

就控制器和参数而言，我有两个相同的指令，但它们使用不同的模板

指令是这样的

.directive('a', function() {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                data: '=',
                namef: '&'
            },
            controller: function($scope) {                                      
                $scope.name1 = $scope.namef({code: $scope.data.units[0].code});
                $scope.name2 = $scope.namef({code: $scope.data.units[1].code});
            },
            templateUrl: 'a.html',
        };      
    })

还有另一个“b”，看起来一样，但是有模板b.html 然后两个指令的使用方式如下：

<div>   
    <div class="class1" id="{{mydata.id}}">mydata.id</div>
    <div class="class2">
        <a data="mydata[unit]" partic="getName(code)"></a>
        <b data="mydata[unit]" partic="getName(code)"></b>  
    </div>
<div>

mydata.id

我想知道是否有一种方法可以做到这一点而不重复相同的代码。我读过关于创建服务并从控制器调用它的内容，但这只解决了控制器中的问题

我知道这没什么大不了的，因为指令很简单，但因为我对angular很陌生，我想也许有一个“好”的方法来做这样的事情

谢谢。

这就够了吗

.directive('a', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                data: '=',
                namef: '&'
            },
            controller: 'sharedController',
            templateUrl: 'a.html',
        };      
    })  
.directive('b', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                data: '=',
                namef: '&'
            },
            controller: 'sharedController',
            templateUrl: 'b.html',
        };      
    })
.controller('sharedController', function($scope){
    $scope.name1 = $scope.namef({code: $scope.data.units[0].code});
    $scope.name2 = $scope.namef({code: $scope.data.units[1].code});
}); 

---

制定一个指令是一种选择吗？如果是，则可以使用一个函数，该函数将基于属性返回templateUrl

.directive('ab', function() {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '=',
            namef: '&'
        },
        controller: function($scope) {                                      
            $scope.name1 = $scope.namef({code: $scope.data.units[0].code});
            $scope.name2 = $scope.namef({code: $scope.data.units[1].code});
        },
        templateUrl: function(element,attrs){
                if(attrs.type == "a" ){
                    return "a.html"
                }else if(attrs.type == "b"){
                    return "b.html"
                }else{ return "unknown.html" }
        }
    };      
})

---

当然，您可以添加一些回退选项。

templateUrl

属性（以及

template

属性）接受函数，因此您可以根据某个属性选择模板：

.directive("foo", function(){
  return {
    templateUrl: function(tElement, tAttrs){
       // or any other logic
       return tAttrs.type === "typeA"? "a.html" : "b.html";
    },
    // etc ...
});

用法是：

<foo type="typeA" data="mydata[unit]" partic="getName(code)"></foo>

---

请注意，不能使用像

type=“{{typeVar}}}”

这样的表达式，因为在使用

templateUrl

函数对其求值时，不会对其进行插值。

以下是一个解决方案，它删除重复的代码，但允许您拥有两个“相同”的指令，但templateUrl除外：

首先定义一个函数，该函数返回具有正确url的指令定义对象：

function getDefObject(templateUrl) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            data: '=',
            namef: '&'
        },
        controller: function($scope) {                                      
            $scope.name1 = $scope.namef({code: $scope.data.units[0].code});
            $scope.name2 = $scope.namef({code: $scope.data.units[1].code});
        },
        templateUrl: templateUrl,
    }    
}

那么你只需称之为：

.directive('a', function() {
        return getDefObject('a.html');      
    })
.directive('b', function() {
    return getDefObject('b.html');      
})

---

您可能应该重命名GetDeObject并将其移动到一个服务中，但我希望这个想法会出现。

这样做有效，当然看起来更干净。我的想法更激进，有点像

b=newa（）

，这样就不需要再次声明所有其他属性（restrict、replace、scope等等）。这可能吗？否则，你的答案会很适合我，@mathew bergWhy不只是使用

tElement.prop（'tagName'）.toLowerCase（）

，它将返回“a”或“b”。@Strille，这纯粹是一个选择问题。我选择的指令是

——它可以是一个元素，而不是依赖

（想想看，它是：））这就是我要找的！杰出的