这是一个片段，演示了如何使用 $controller 和 $scope 从基本 Controller 继承:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function($scope) {
$scope.name = 'World';
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>如何使用“controller as”语法来做同样的事情？此片段演示了我所追求的，但它不起作用:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>最佳答案
您可以使用 Controller 作为语法(或者只使用 $controller 提供商返回的 ctrl 实例)并使用 angular.extend。但我不认为还有另一种隐含 Angular 方式可以做到这一点，因为“ Controller 作为”语法最终将 Controller 实例作为指定为别名的属性名称放置在各自的范围内。但这真的不是继承，而是利用对象扩展。
var ctrl = $controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, ctrl);
//or
$controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, $scope.base); //With as syntax
或者您可以使用 prototypical inheritance在 Controller 构造函数本身的实现级别。有很多可用的语法糖，typescript 的 extends还有另一个漂亮而简单的example here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
var ctrl = $controller('BaseCtrl as base', {
$scope: $scope
});
angular.extend(this, ctrl);
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>关于javascript - 如何使用 "controller as"语法从基本 Controller 继承？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26351163/