gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:00:33 25 4
gpt4 key购买 nike

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

但是,当 ParentController 位于 IIFE 内部时,ParentController.apply() 在 ChildController 中不起作用,因为 ParentController 未定义。

我知道这是因为 ParentController 周围的 IIFE 正在将其从全局范围中删除。我的问题是:如何在 ParentController 和 ChildController 周围保留 IIFE,同时仍然让 ParentController.apply() 正常工作(即 - 不会错误地显示为“未定义”)?

注意:我不想在我的解决方案中使用 $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>

最佳答案

这可能很做作,但看起来就像你所要求的:

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>

请注意,这不是真正的原型(prototype)继承。

关于javascript - 由于 IIFE,ParentController.apply() 无法在 ChildController 内部工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28114899/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com