代码之家 › 专栏 › 技术社区 › trevor

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

iife angularjs javascript

trevor · 技术社区 · 9 年前

在以下代码段中从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>

1 回复 | 直到 9 年前

JMM 9 年前

这可能很做作,但这似乎是你想要的:

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>

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