Question

以下是演示如何使用$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>

Answer 1

您可以使用控制器作为语法（或只使用$controller提供程序返回的ctrl实例）并使用angular.extend。但我不认为还有另一种隐含角度的方法可以做到这一点，因为＆＃34;控制器为＆＃34;语法最终将控制器实例作为指定为别名的属性名称放在相应的范围上。但这实际上并不是继承，而是利用对象扩展。

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。有很多可用的语法糖，typescript＆＃39; extends还有另一个很好的简单example here。

＆＃13;

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';
});

＆＃13;

<!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>

＆＃13;

如何使用“controller as”语法继承基本控制器？

1 个答案: