2016-05-06 4 views
3

Ich habe eine AngularJS-Direktive wie unten gezeigt erstellt. Im zugehörigen Controller berechne ich den Wert einer Variablen text als "SomeText". Ich möchte, dass dieser Text Hello World!! im template Attribut der Direktive ersetzt. Wie kann ich es tun?Wie kann ich in AngularJS den Übergabewert vom Controller an das Vorlagenattribut der Richtlinie zurückgeben?

Mein HTML:

<myp-directive myarg="myObject"></myp-directive> 

Meine Richtlinie:

myApp.directive('mypDirective',function(){ 
    return { 
     restrict:'E', 
     scope: { 
     myarg: '=' 
     }, 
     controller: 'DirectiveCtrl', 
     controllerAs: 'directiveCtrl', 
     bindToController: true, 
     template: 'Hello World!!' 
    }; 
    } 
); 

Mein Controller:

myApp.controller('DirectiveCtrl', function($scope){ 
    var self = this; 
    $scope.$watch(function() {return self.prediction;}, function (newVal, oldVal) 
    { 
     if (newVal !== oldVal && newVal !== null){ 
      var text = "SomeText"; 
     } 
    }); 
}); 

Antwort

4

Da Sie die controllerAs: 'directiveCtrl' Konfiguration verwenden Sie einfach "SomeText" als Variable des Reglers (Selbst-) zuweisen können, und es wird in verfügbar sein Die Vorlage.

Pascal Precht schrieb eine recht umfangreiche explanation about controllerAs.

-Controller

myApp.controller('DirectiveCtrl', function($scope){ 
    var self = this; 
    self.text = "Hello World!!"; 
    $scope.$watch(function() {return self.prediction;}, function (newVal, oldVal) 
    { 
     if (newVal !== oldVal && newVal !== null){ 
      self.text = "SomeText"; 
     } 
    }); 
}); 

Richtlinie

myApp.directive('mypDirective',function(){ 
    return { 
     restrict:'E', 
     scope: { 
     myarg: '=' 
     }, 
     controller: 'DirectiveCtrl', 
     controllerAs: 'directiveCtrl', 
     bindToController: true, 
     template: '{{directiveCtrl.text}}' 
    }; 
    } 
); 
3

Gebrauchbereich. Binden Sie den Text "Hallo Welt" an eine Bereichsvariable (Daten) und binden Sie es in der Vorlage als {{Daten}}. Ändern Sie den Wert der Bereichsvariable vom Controller.

in diesem Werfen Sie einen Blick fiddle

Richtlinie

myApp.directive('mypDirective', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     myarg: '=' 
    }, 
    controller: 'DirectiveCtrl', 
    controllerAs: 'directiveCtrl', 
    bindToController: true, 
    template: '{{data}}', 
    link: function(scope, elem, attr, directiveCtrl) { 
     scope.data = "Hello World!!!" 
    } 
    }; 
}); 
+0

Was meinst du mit "den Text Hallo Welt binden"? Können Sie bitte ein Beispiel mit Code zeigen? Ich möchte nicht, dass das HTML über die Interna der Direktive oder diesen Controller informiert. –

+0

Ich habe eine Geige erstellt, um es zu demontieren - http://jsfiddle.net/pratikjs/ocwujdvu/. –

Verwandte Themen