Question

我试图在Angular 1.4的运行时覆盖控制器。

我正在使用Angular和Webpack，我的最终目标是能够使用HMR（热模块替换）重新加载控制器。但是，我的包版现在正在弄清楚如何让控制器正确更新。

所以最后如果你有

angular.module('app').controller('HomeController', function() {
  this.message = 'Hello World!';
});

然后在webpack-dev-server运行时修改了控制器：

angular.module('app').controller('HomeController', function() {
  this.message = 'Goodbye World!';
});

当前状态下的控制器应该适当更新。我确实已经有逻辑重新加载状态（$ state.transitionTo）

我正在使用UI路由器和Babel，虽然Babel应该相当无关紧要，因为我没有使用一半的好处（即类）。

有人有什么想法吗？

Answer 1

我不确定你的项目的其余部分是如何设置的，但可能你的webpack配置只有一个入口点。因此，将控制器/服务等导入到该入口点类似于索引是有意义的。

控制器：

// Main.js

export default function HomeController () {
  this.message = 'Hello World!'
}

指数：

// entry.js

import angular from 'angular'
import HomeController from './controllers/HomeController.js'

angular
  .module('app', [])
  .controller('HomeController', HomeController)

我的控制器更改似乎在我创建https://github.com/alex-wilmer/app-starter/tree/angular的初始项目中正确更新，虽然它不是HMR，只是实时重新加载。

Answer 2

我找到了所有感兴趣的解决方案。为了使HMR与角度控制器一起工作，有效地重写控制器函数的主体，我将init函数绑定到模块外部的持久JavaScript对象（aka文件）。

var mod = angular.module('app').controller('HomeController', function($interval) {
    mod.initHomeController(this, $interval);
});

mod.initHomeController = function(vm, $interval) {
    vm.message = 'Hello World!';
};

在Angular中覆盖控制器

2 个答案: