保持多个控制器的范围

时间：2014-02-10 23:00:09

标签： javascript angularjs angularjs-scope

在范围内拥有多个控制器是不错的做法，这样您就可以在整个文档中的每个控制器之间来回切换？

例如，如果我想交错两组价格/数量/总价值，那么执行以下操作是不好的设计：On Plnkr 

<html ng-app="invoiceTest">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script type="text/javascript" src="invoiceTest.js"></script>
</head>
<body>
  <span ng-controller="InvoiceController as invoice1">
  <span ng-controller="InvoiceController as invoice2">

   <div>Cost 1: <input type="number" ng-model="invoice1.cost" required ></div>
   <div>Cost 2: <input type="number" ng-model="invoice2.cost" required ></div>

   <div>Quantity 1: <input type="number" ng-model="invoice1.qty" required ></div>
   <div> Quantity 2: <input type="number" ng-model="invoice2.qty" required ></div>

   <div><b>Total 1: </b>{{invoice1.total('USD') | currency}}</div>
   <div><b>Total 2: </b>{{invoice2.total('USD') | currency}}</div>

  </span>
  </span>
</body>
</html>

enter image description here

或者，有没有办法在范围内携带多个控件而不嵌套它们，或者将元素的范围指向先前声明的控制器实例？

感谢您的任何建议。我刚刚开始使用棱角分明。我习惯于（MVVM）框架，你绑定的元素在ViewModel中实例化，而不是在View本身。

1 个答案:

答案 0 :(得分：0)

我要说你的用例有点人为。您的示例实际上只需要一个具有对象数组的控制器，每个控制器都有数量和价格。

我想说我无法想到两个控制器是个好主意的情况;控制器应该是非常独立的，如果你有两个控制器在同一个代码上，你就会让自己陷入冲突和麻烦。这并不是说你不应该嵌套逻辑 - 将逻辑放在指令中可能是一个好主意，而且这是控制器内部的一种控制器 - 但是将两个控制器放在一起通常意味着你想要在它们之间共享数据，这可能会很快笨拙。

让用户获取角色需要时间，但在您的示例中，我会尝试重构您的控制器以获得一个对象数组，然后使用ng-repeat之类的指令为您生成html，而不是自己编写。 Angular在将模型转换为视图方面非常强大，一旦你使用它，我认为你会发现使用多个控制器并不是最糟糕的想法，但几乎总有一个更好的解决方案更容易编写和更容易维护。

修改

例如，这是您在一个控制器下的原始示例，以及显示它正常工作的完整JSFiddle。

app.controller('OneController', function($scope){
  $scope.invoices = [
    { cost: 100,
     qty: 5,
     total: function(){return this.cost*this.qty}
    },//etc.
  ];
});

app.directive('compareInvoices', function(){
  return {
    restrict: 'E',
    replace: true,
    scope: {
        invoices: '='
    },
    template:'<div>'+
              '<div ng-repeat="invoice in invoices">Cost {{$index+1}}: <input type="number" ng-model="invoice.cost" required ></div>'+
              '<div ng-repeat="invoice in invoices">Quantity {{$index+1}}: <input type="number" ng-model="invoice.qty" required ></div>'+
              '<div ng-repeat="invoice in invoices"><b>Total {{$index+1}}: </b>{{invoice.total()}}</div>'+
              '</div>'
  }
});

它创建了您最初的相同HTML，但也可以处理任意数量的发票，而不仅仅是2，如果您想比较两张发票，您可以在控制器内轻松完成，因为它可以立即访问

相关问题
最新问题