angularjs - 在 Angular 组件的 templateUrl 中注入(inject)服务

Question

我有一个带有指令的网络应用程序，其中模板 url 是通过工厂构建的，但有时我还需要其中一个属性的值，所以我会这样做:

myDirective.$inject = ['myFactory'];

function myDirective(myFactory) {

    return {
        restrict: 'E',
        replace: true,
        scope: {},
        bindToController: {
            ...
        },
        controller: myDirectiveController,
        templateUrl: function(elem, attrs) {
            return angular.isDefined(attrs.myval) ? myFactory.url() : myFactory.altUrl();
        }
    }
}

现在，我正在将其中一些更改为组件，但我没有设法做到这一点，因为现在组件是对象而不是函数。

我可以不使用 attrs，像这样

angular.component('myDirective', {
bindings: {
    ...
    },
    controller: 'myDirectiveController as vm',
    templateUrl: function(myFactory) {
            return myFactory.url();
    }
}

但如果我也尝试使用 attrs

angular.component('myDirective', {
bindings: {
    ...
    },
    controller: 'myDirectiveController as vm',
    templateUrl: function(elem, attrs, myFactory) {
            return angular.isDefined(attrs.myval) ? myFactory.url() : myFactory.altUrl();
    }
}

我得到一个 Angular 错误。关于如何执行此操作的任何想法？

Answer 1

这是因为 component , templateUrl 变成了一个可注入(inject)的函数:

If templateUrl is a function, then it is injected with the following locals:
$element - Current element
$attrs- Current attributes object for the element

这意味着您可以像注入(inject)任何其他服务、工厂、值等一样注入(inject) $element 和 $attrs。您将注入(inject)到 templateUrl。这不仅仅是接收 element 和 attrs 作为前 2 个参数(可以命名为任何东西)，比如 templateUrl 指令:

指令:

templateUrl: function(tElement, tAttrs) 

组件:

templateUrl: function(someService, $attrs, $element, someOtherService)

按照这个逻辑，在您上面显示的示例中，错误来自这样一个事实:angular 找不到名称为 elem 或 attrs 的服务或本地>.