2017-07-20 4 views
1

Edit : corrected the foo method.

emittieren verwenden bin ich ein Junior in AngularJS, und damit bin zu kämpfen. Ich verwende eine Direktive mit Prototyp-Methoden, und ich würde gerne eine sogar in einer von ihnen ausstrahlen, aber ich konnte es bis jetzt nicht arbeiten lassen.

angular.module('myModule') 
    .directive('myDirective', function() { 
     return { 
      transclude: true, 
      scope: { 
      }, 
      bindToController: true, 
      controller: MyController, 
      controllerAs: 'myCtrl', 
      templateUrl: 'template/myTemplate.html' 
     }; 
    } 
); 

Dann habe ich den Controller, der so aussieht.

Es sieht so aus, als ob ich mit der $ scope-Injektion versagt habe, da sie nicht definiert ist.

Kann mir jemand sagen, was ich falsch gemacht habe? Das wäre sehr zu begrüßen!

+0

Der Controller-Code ist nicht sinnvoll. Was ist 'StepperCtrl' und wie hängt es mit dem Controller-Code zusammen? – georgeawg

+0

Ich empfehle isolate Bereich Direktiven vermeiden mit $ emit zu kommunizieren, um Ereignisse zu kommunizieren. Kommunizieren Sie stattdessen Ereignisse mit dem Ausdruck '&' binding. – georgeawg

+0

Sie zeigen 'MyController' als Konstruktor und dann eine Prototypmethode von' StepperCtrl' - ist das ein Tippfehler? Wenn das der Fall ist und Sie 'MyController.prototype.foo' verwenden wollten, können Sie' this. $ Scope. $ Emit' in der Prototyp-Methode ausführen, da Sie '.S. $ Scope' bereits im Konstruktor gesetzt haben. – Adam

Antwort

1

Sie definiert this.$scope = $scope; in Konstruktor, so sollten Sie auch Umfang als Instanz Eigenschaft zugreifen:

this.$scope.$emit('fooEvent'); 
+0

Versuchte das, aber ich hatte den Fehler $ emit ist undefined oder sowas. – BigFoot

+1

@BigFoot - 'ist undefiniert oder etwas '- das ist eine äußerst wenig hilfreiche Fehlermeldung, um jemandem zu sagen, der versucht, Ihnen zu helfen. – Adam

+0

@Adam - Ich entschuldige mich, ich wollte gerade das Büro verlassen und konnte mich nicht an den genauen Fehler erinnern und hatte keine Zeit, es zu reproduzieren. Hier ist es: 'TypeError: Kann Eigenschaft '$ emit' von undefined nicht lesen – BigFoot

0

Für was es wert ist, hier ist ein Beispiel dafür, wie eine Steuerung als eine Klasse zu schreiben:

class MyController { 
 
    constructor($mdComponentRegistry, $attrs, $log,$scope) { 
 
     this.$scope = $scope; 
 
     this.$mdComponentRegistry = $mdComponentRegistry; 
 
     this.$attrs = $attrs; 
 
     this.$log = $log; 
 
    } 
 
    $onInit() { 
 
     this.hello = 'hello'; 
 
     this.currentStep; 
 
     this.foo(); 
 
    } 
 
    foo() { 
 
     console.log("Executing foo function"); 
 
     console.log(this.$scope.myCtrl.hello); 
 
     console.log("$emit is a", typeof this.$scope.$emit); 
 
    } 
 
} 
 
MyController.$inject = ['$mdComponentRegistry', '$attrs', '$log', '$scope']; 
 

 
angular.module('myModule',[]) 
 
    .directive('myDirective', function() { 
 
     return { 
 
      scope: { 
 
      }, 
 
      bindToController: true, 
 
      controller: MyController, 
 
      controllerAs: 'myCtrl', 
 
      template: 
 
       `<fieldset>myDirective {{myCtrl.hello}} 
 
       </fieldset>` 
 
     }; 
 
    } 
 
) 
 
.value('$mdComponentRegistry', {})
<script src="//unpkg.com/angular/angular.js"></script> 
 
    <body ng-app="myModule"> 
 
    <h2>Controller Written as a Class</h2> 
 
    <my-directive></my-directive> 
 
    </body>

Verwandte Themen