ParentController.apply() 由于 IIFE 而无法在 ChildController 内部工作

Question

当在以下代码段中从 ParentController 中删除 IIFE 时，ParentController.apply() 在 ChildController 中按预期工作。

但是，当 ParentController 在 IIFE 中时，ParentController.apply() 在 ChildController 中不起作用，因为 ParentController 未定义。

我知道这是因为围绕 ParentController 的 IIFE 正在将其从全局范围中移除。我的问题是：如何在让 ParentController.apply() 正常工作的同时保持 ParentController 和 ChildController 周围的 IIFE（即 - 不会像 'undefined' 那样出错）？

注意：我不想在我的解决方案中使用 $scope，所以在回答时不要提出任何与 $scope 有关的建议。此外，ParentController 和 ChildController 位于不同的文件中，因此将它们放在同一个 IIFE 中不是有效的解决方案。

angular.module('app', []);

(function () {

  'use strict';

  angular
    .module('app')
    .controller('ParentController', ParentController);

  function ParentController() {
    var vm = this;
    vm.hello = "Hello from Parent Controller!";
    vm.helloAgain = function() {
      return "Hello again from Parent Controller";
    }
  }
})();

(function () {

  'use strict';

  angular
    .module('app')
    .controller('ChildController', ChildController);

  function ChildController() {
    var vm = this;
    vm.hello = "Hello from Child Controller!";
    
    ParentController.apply();

    vm.helloAgain = function() {
      return parent.helloAgain();
    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
    <div ng-controller="ParentController as parent">
      <h4>{{ parent.hello }}</h4>
      <div ng-controller="ChildController as child">
        <h4>{{ child.hello }}</h4>
        <h4>{{ parent.hello }}</h4>
    
        <!-- calls parent.helloAgain() from app.childController.js -->
        <h1>{{ child.helloAgain() }}</h1>
      </div>
    </div>
</body>

Answer 1

这可能有点矫揉造作，但它看起来像您要的：

angular.module('app', []);

(function () {

  'use strict';

  angular
    .module('app')
    .controller('ParentController', ParentController);

  function ParentController() {
    var vm = this;
    vm.hello = "Hello from Parent Controller!";
    vm.helloAgain = function() {
      return "Hello again from Parent Controller";
    }
    vm.helloYetAgain = function() {
      return "Hello AGAIN from Parent Controller";
    }
  }
})();


(function () {

  'use strict';

  angular
    .module('app')
    .controller('ChildController', ['$controller', ChildController]);

  function ChildController ($controller) {
    var vm = this;
    var parent = $controller('ParentController');

    parent.constructor.apply(this, arguments);

    vm.hello = "Hello from Child Controller!";

    vm.helloAgain = function() {
      return parent.helloAgain.call(this);
    }
  }
})();

<body ng-app="app">
    <div ng-controller="ParentController as parent">
      <h4>{{ parent.hello }}</h4>
      <div ng-controller="ChildController as child">
        <h4>{{ child.hello }}</h4>
        <h4>{{ parent.hello }}</h4>

        <!-- calls parent.helloAgain() from app.childController.js -->
        <h1>{{ child.helloAgain() }}</h1>
        <h1>{{ child.helloYetAgain() }}</h1>
      </div>
    </div>
</body>

注意不是真正的原型继承。

ParentController.apply() 由于 IIFE 而无法在 ChildController 内部工作

ParentController.apply() Not Working Inside ChildController Because Of IIFEs

javascript

iife

angularjs