如何使用“继承”从基本控制器继承;控制器为“;语法

How to inherit from base controller using "controller as" syntax?

本文关键字：控制器 继承 语法 何使用      更新时间：2023-09-26

以下是一个片段，演示如何使用$controller和$scope:从基本控制器继承

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。但我不认为还有另一种隐含角度的方法可以做到这一点，因为"controller as"语法最终将控制器实例作为指定为别名的属性名称放置在相应的作用域上。但这实际上不是继承，而是利用对象扩展。

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

或者，您可以在控制器构造函数本身的实现级别使用原型继承。有很多语法糖可用，typescript的extends还有另一个简单的例子。

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>

相关文章：