Question

我在控制器和参数方面有两个相同的指令，但它们使用不同的模板。

指令是这样的

.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>

我想知道是否有办法在不重复相同代码的情况下执行此操作。我读到了创建服务并从控制器调用它，但这只能解决控制器中的问题。

我知道这不是什么大不了的事，因为这个指令非常简单，但由于我对角度很新，我想也许有一种“好”的方法来做这样的事情。

感谢。

Answer 1

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函数评估它时不会进行插值。

Answer 2

是否可以选择一个指令？如果是，那么您可以使用将根据属性返回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" }
        }
    };      
})

当然你可以添加一些后备选项。

Answer 3

这是一个删除重复代码但允许你有两个“相同”指令的解决方案，除了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');      
})

您应该重命名getDefObject并将其移动到服务中，但我希望这个想法能够实现。

Answer 4

这样就够了吗？

.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});
});

2个相同的指令与不同的模板

4 个答案: