javascript - 如何在 Angular 中对模型进行别名

Question

我有一个 Angular 模板，我想在两个不同的 Controller 中重用该模板。问题是两个 Controller 需要不同的 ng-model 名称。

该模板包含如下 HTML，其中 ng-model 引用是“obj”的属性:

<input name="customer" ng-model="obj.customer" id="customer">

其中一个 Controller 需要 ng-model 名称与“obj”关联。这意味着该模板是完美的。

为了简单起见，另一个 Controller 需要将 ng-model 与“obj1”关联。

有没有办法可以使用相同的 HTML 模板来处理这个问题？仅仅为了更改 ng-model 名称而必须复制 HTML 似乎很遗憾。我尝试使用 ng-init，说 obj = obj1，但这似乎不起作用。

Answer 1

正如 @PSL 评论的那样......

Angular 中的指令允许在整个应用程序的其他地方重复使用模板和代码。您可以传递某种模型的 Angular Directive(指令)，它的行为就像它自己的 Controller 和自己的范围，将其与应用程序的其余部分隔离。

例如，您希望获得用户及其信息的列表，您可以创建一个指令并向其传递要执行操作的数据。然后您可以根据需要多次重复该过程。

有关更多信息和示例，您可以查看 Angular 关于指令的文章。 >> Directives guide .

我还将在下面提供一个简短的示例指令来解决您的客户问题。 >>plunkr example

.directive('myCustomer', ['$timeout', function($timeout) {
return {
  template: '<input name="customer" data-ng-model="customerInfo.name">',
  replace: true,
  scope: {
    customerInfo: "="
  },
  controller: ['$scope', function($scope){
    $scope.init = function(){
      console.log("i'm alive!");
    }
  }],
  link: function(scope, element, attrs, transclute, requires){
    scope.init();
  }
}
}])

希望这有帮助!

-mbp