AngularJS Controller 构造函数和带参数的实例化

Question

是否可以在 AngularJS 中实例化 Controller 并将参数传递给其构造函数，就像在 OOP 中一样？我不知道如何重构 3 个相同的 Controller ，仅使用更改的变量名称和内容...

谢谢。

Answer 1

如果页面上有 3 个独立的部分，它们具有非常相似的 Controller 代码，那么听起来您应该考虑使用指令。即使您不需要直接控制 DOM(这是使用指令的经典原因)，并且只需要标准的 Angular 数据绑定(bind)，那么这是通过设置的属性在不同上下文中重用 Controller 的好方法该指令。

你可以在

看到一个正在运行的 plunkr

http://plnkr.co/edit/qclp6MOxGWP7Ughod4T8?p=preview

但关键点是指令可以绑定(bind)到其父作用域 Controller 中的变量。假设，在父作用域中您有 3 个变量，因此:

$scope.myVariable1 = 'Value 1';
$scope.myVariable2 = 'Value 2';
$scope.myVariable3 = 'Value 3';

然后您可以在模板中设置该指令的 3 个实例:

<my-directive my-param="myVariable1"></my-directive>
<my-directive my-param="myVariable2"></my-directive>
<my-directive my-param="myVariable3"></my-directive>

然后每个指令都可以使用'my-param'属性中的变量

scope: {
  'myParam':'='
}

“=”表示在指令范围内有一个名为“myParam”的变量，它等于(+绑定(bind)到)指令上“my-param”属性指定的变量。因此，在指令的模板上，您可以使用:

<div>Value of parameter: {{myParam}}</div>

在指令的 Controller 中，您可以访问如下:

$scope.myParam

然后应该能够根据该实例的 myParam 自定义其行为。