angularjs - 将服务/工厂注入(inject)指令

Question

我有两个/多个具有相同签名的服务。我可以动态地注入(inject)指令吗？像下面的东西

var app = angular.module('app',[]);
app.factory('myData', function(){
    return {
        name : "myName",
        id : 1,
        create: function(){
            //do something
        }
    }
});
app.factory('yourData', function(){
    return {
        name : "yourName",
        id : 1,
        create: function(){
            //do something
        }
    }
});
app.directive('changeIt',function($compile){
    return {
        restrict: 'CA',
        scope:{
            data : '=' //or some oether syntax?
        },
        link: function (scope, element, attrs) {
            scope.name = data.name;
        }
    }
}); 

然后我应该能够使用如下指令

<div class='change-it' data='myData'>{{name}}</div>
<div class='change-it' data='yourData'>{{name}}</div>

我将添加更多具有相同签名的服务，并且我应该能够在不更改的情况下使用该指令，这可能吗？

Answer 1

这是一个不需要父 Controller 或工厂工厂的解决方案。

在指令中，注入(inject) $injector 服务以检索工厂实例:

app.directive('changeIt',function(){
        return {
            scope:{
                factoryName : '@'
            },
            controller: function ($scope, $injector) {

                var factoryInstance = $injector.get($scope.factoryName);

                $scope.name =  factoryInstance.name;
            }
        }
    }); 

请注意它发生在 Controller 方法中。我无法使 $injector.get() 在链接函数中工作。

模板 :

<div class='change-it' factory-name="myData"> {{ name }} </div>
<div class='change-it' factory-name="yourData"> {{ name }} </div>

- 编辑 -

链接功能内的工作解决方案:

 app.directive('changeIt',function(){
            return {
                scope:{
                    factoryName : '@'
                },
                link: function (scope, element) {

                    var factoryInstance = element.injector().get(scope.factoryName);

                    scope.name =  factoryInstance.name;
                }
            }
        });