我可以在原型中使用 $emit答案

【问题标题】：Can I use $emit in a prototype我可以在原型中使用 $emit
【发布时间】：2017-07-20 14:20:25
【问题描述】：

Edit : corrected the foo method.

我是 angularJS 的大三学生，正在为此苦苦挣扎。我正在使用带有原型方法的指令，并且我想在其中一个中发出偶数，但到目前为止我还无法使其工作。

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

然后我就有了这样的控制器。

var MyController= (function () {
    function MyController($mdComponentRegistry, $attrs, $log,$scope) {
        this.$scope = $scope;
        this.$mdComponentRegistry = $mdComponentRegistry;
        this.$attrs = $attrs;
        this.$log = $log;
        this.steps = [];
        this.currentStep;
    }
MyController.prototype.foo = function () {
        this.$scope.$emit('fooEvent');
    });

看起来我搞砸了 $scope 注入，因为它没有定义。

谁能告诉我我做错了什么？那将不胜感激！

【问题讨论】：

控制器代码没有意义。什么是StepperCtrl，它与控制器代码有什么关系？
我建议隔离范围指令避免使用 $emit 来传达事件。而是使用表达式& 绑定来传达事件。
您将MyController 显示为构造函数，然后显示StepperCtrl 的原型方法 - 这是一个错字吗？如果是，并且您打算使用MyController.prototype.foo，那么您可以在原型方法中执行this.$scope.$emit，因为您已经在构造函数中设置了this.$scope。

标签： angularjs prototype emit

【解决方案1】：

您在构造函数中定义了this.$scope = $scope;，因此您还应该将作用域作为实例属性访问：

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

【讨论】：

试过了，但我有错误 $emit is undefined 什么的。
@BigFoot - is undefined or something - 这是一个非常无益的错误信息，告诉试图帮助你的人。
@Adam - 抱歉，我正要离开办公室，不记得确切的错误，当时没有时间重现它。这是：TypeError: Cannot read property '$emit' of undefined
@BigFoot 你需要展示这个控制器的用法，并发布它的完整代码，而不是像现在这样随机剪辑。例如，您要从 IIFE 返回构造函数？

【解决方案2】：

对于它的价值，这里有一个如何将控制器编写为类的示例：

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>

【讨论】：