Die Injektion service/factory Richtlinie

Habe ich zwei/mehr services mit derselben Signatur. Kann ich dynamisch Spritzen Sie dann in die Richtlinie? so etwas wie unten

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;
        }
    }
});

Dann sollte ich in der Lage sein, um Sie mit der Direktive, wie unten

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

Ich würde das hinzufügen von mehr services mit derselben Signatur und ich sollte in der Lage sein, die Richtlinie ohne änderung, ist es möglich?

InformationsquelleAutor Murali | 2013-08-26

  1. 14

    Nicht möglich, die Art und Weise. Das beste, was Sie tun können, ist die Bindung der Anwendungsbereich der Richtlinie auf eine Funktion des übergeordneten Bereichs, wird eine Instanz des service:

    app.directive('changeIt', function(){
  return {
    restrict: 'CA',
    scope: { getDataFn : '&' },
    link: function (scope) {
      scope.name = getDataFn().name;
    }
  }
});

    dann aus Ihrer Sicht:

    <div class='change-it' get-data-fn='getMyData()'></div>
<div class='change-it' get-data-fn='getYourData()'></div>

    Schließlich müssen Sie getMyData() und getYourData() an den übergeordneten scope:

    app.controller('Ctrl', function($scope, myData, yourData) {
  $scope.getMyData = function() {
    return myData;
  };

  $scope.getYourData = function() {
    return yourData; 
  };
});

    Plunker Skript hier.

    Ich denken kann, einen anderen Ansatz, aber: Sie könnte erstellen einer abstrakten Fabrik und injizieren es in der Richtlinie, und übergeben Sie einen parameter, um die Richtlinie es könnte also sagen, die abstrakte Fabrik den richtigen service. So etwas wie dieses:

    app.service('dataFactory', function(myData, yourData) {
  this.create = function(type) {
    if (type === 'myData')
      return myData;
    else if (type === 'yourData')
      return yourData;
  };
});

app.directive('changeIt', function(dataFactory){
  return {
    restrict: 'CA',
    scope: true ,
    link: function (scope, element, attrs) {
      scope.name = dataFactory.create(attrs.type).name;
    }
  }
});

    Und jetzt müssen Sie gehen, die Art der Richtlinie:

    <div class='change-it' type="myData"></div>
<div class='change-it' type="yourData"></div>

    Plunker hier.

    Sowohl die Ansätze gut Aussehen, wirklich.
    Ich glaube, du bist in der Lage zu definieren, die eine einfache Steuerung ausführt, die die datacall und übergeben es an die Richtlinie mit ng-controller="YourCtrl"
    Wirklich hilfreich ist. Danke!

    InformationsquelleAutor Michael Benford

  2. 9

    Hier ist eine Lösung ohne die Notwendigkeit für eine übergeordnete Steuerung oder eine Fabrik der Fabriken.

    In der Richtlinie, injizieren die $Injektor - Dienst zum abrufen der factory-Instanz: 

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

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

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

    Feststellen, es tut sich was in der controller-Methode. Konnte ich nicht machen, $Injektor.get() die Arbeit in der link-Funktion.

    Vorlage :

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

    -- Edit --

    Funktionierende Lösung innerhalb der link-Funktion :

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

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

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

    InformationsquelleAutor Julien Moumné

Schreibe einen Kommentar