Question

我有一个带有指令的Web应用程序，其中模板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();
    }
}

我收到角度误差。关于如何做到这一点的任何想法？

Answer 1

这是因为使用component，templateUrl成为可注射函数：

如果templateUrl是一个函数，那么它将注入以下本地：
  $element - 当前元素
  $attrs - 元素的当前属性对象

这意味着您可以像注入$element中的任何其他服务，工厂，价值等一样注入$attrs和templateUrl。这不仅仅是接收element和attrs，而是前两个参数（可以命名为任何参数），例如templateUrl中的directive：

指令：

templateUrl: function(tElement, tAttrs)

组件：

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

按照这种逻辑，在上面显示的示例中，错误来自于角度无法找到名称为elem或attrs的服务或本地的事实。

在角度组件中的templateUrl中注入服务

1 个答案: