6

同じ署名を持つ 2 つ以上のサービスがあります。ディレクティブに動的に挿入できますか? 以下のようなもの

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>

同じ署名を持つサービスをさらに追加する予定であり、ディレクティブを変更せずに使用できるはずですが、可能ですか?

4

2 に答える 2

10

これは、親コントローラーや工場の工場を必要としないソリューションです。

ディレクティブで、$injectorサービスを挿入してファクトリ インスタンスを取得します。 

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

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

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

コントローラーメソッドで発生していることに注意してください。リンク関数で $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;
                }
            }
        });
于 2014-03-26T11:44:04.970 に答える