Question

我在页面控制器中定义$items数组：

$scope.items = [{id:1,type:apple},{id:2,type:banana},{id:3,type:mango}]

然后我从页面模板迭代这个数组：

<div ng-repeat="item in items">
    <my-item item-type="{{item.type}}"></my-item>
</div>

myItem是一个定义如下的指令：

function () {
    function resolveTemplate(element, attrs) {
        var itemType = '';
        if (itemType === 'apple') {
            return 'apple.html';
        } else {
            return 'default.html';
        }
    }
    return {
        restrict: 'E',
        templateUrl: resolveTemplate,
        link: function (scope, element, attrs) {
            // nothing here
        }
    };
}

我试过用：

scope: {
    'itemType': '@'
}

但似乎我只能从attrs.itemType而不是link()函数（其中返回未处理的resolveTemplate()）来调用{{item.type}}。

那么在这种情况下动态选择模板的正确方法是什么？

Answer 1

来自angularjs docs：https://docs.angularjs.org/guide/directive

注意：您目前无法访问范围变量来自templateUrl函数，因为之前请求过模板范围已初始化。

但是，您可以在resolveTemplate函数中访问某些angularjs服务。因此，如果可能，您可以从服务中提取itemType。您的指令如下所示：

app.directive('myDirective', function(templateResolveService){
    function resolveTemplate(element, attrs) {
        var itemType = templateResolveService.getItemType();
        if (itemType === 'apple') {
            return 'apple.html';
        } else {
            return 'default.html';
        }
    }
    return {
        restrict: 'E',
        templateUrl: resolveTemplate,
        link: function (scope, element, attrs) {
            // nothing here
        }
    };
}

根据父控制器范围变量选择Angular Directive的模板

1 个答案: