2016-08-25 4 views
1

zuzugreifen Ich bin neu in eckigen und stecken in einem konzeptionellen Problem. Ich kann in der "helloWorld" -Direktive nicht auf den "Spiel" -Dienst zugreifen.Nicht in der Lage, auf den Dienst in der Direktive in eckigen

erwartet = Name: WarCraft

Ist = Name:

Hier ist meine js und html-Datei:

JS-Code:

var app = angular.module("app",[]); 

app.provider("game", function() { 
    var type; 
    return { 
     setType: function (value) { 
      type = value; 
     }, 
     $get: function() { 
      return { 
       title: type + "Craft" 
      }; 
     } 
    }; 
}); 

app.config(function (gameProvider) { 
    gameProvider.setType("War"); 
}); 

app.controller("AppCtrl", function ($scope,game) { 
    $scope.title = game.title; 
}); 

app.directive('helloWorld', ["game",function (game) { 
    return { 
     template: 'Name : {{game.title}}' 
    }; 
}]) 

HTML:

<title>Services</title> 
<script src="angular.min.js"></script> 
<script src="my-file.js"></script> 
</head> 
    <body ng-app="app"> 

     <div ng-controller="AppCtrl">{{title}} </div> 
     <hello-world></hello-world> 
    </body> 
+1

Spiel ist nicht auf Ihrem Umfang verfügbar. Wenn Sie eine Direktive verwenden, sollten Sie ein Objekt mit einer Link-Funktion zurückgeben. Dort können Sie eine Eigenschaft Ihres Bereichs für den Service festlegen. mögen: Verbindung: {....., Funktion (Bereich, elem, attrs, ctrl) { scope.game = Spiel;} –

+0

Ich habe Spiel in Richtlinie eingespritzt. es wird nicht so funktionieren? –

+0

Ja, Sie haben es injiziert, wie Sie es in den Controller injizieren, aber wenn Sie sich Ihren appCtrl anschauen, müssen Sie auch tun: $ scope.title = game.title; –

Antwort

1

etwas wie folgt aus:

app.directive('helloWorld', ["game",function (game) { 
    return { 
    restrict: 'E', 
    scope: {}, 
    link: function (scope, elem, attrs, ctrl) { 
    scope.title = game.title; 
    }, 
    template: 'Name : {{title}}' 
}; 
}]) 
+0

Vorlage: 'Name: {{game.title}}'? –

+0

Es gibt immer noch kein Spiel im Bereich –

+0

Und der Bereich sollte isoliert werden, um die Verschmutzung der Controller-Bereich zu vermeiden –

0

Zugriff auf Ihre Spieldienst in controller, die in Ihrer template verfügbar sein wird. Wenn Sie es nur in template benötigen, injizieren Sie es nur in controller ... Ihre link oder andere Funktion muss nicht wissen.

app.directive('helloWorld', function() { 
    return { 
     controller: function($scope, game) { 
      $scope.game = game; 
     }, 
     template: 'Name : {{game.title}}' 
    }; 
}]) 
0

Hier ist Lösung auf plunker, zu spielen, um.

Setzen Sie einfach definieren Sie die Variable, die von der Ansicht verwendet wird und stellen Sie den benötigten Wert ein.

app.directive('helloWorld', ["game", function(game) { 
    return { 
    template: 'Name : {{game.title}}', 
    link: function(scope) { 
     scope.game = game; 
    } 
    }; 
}])