保持范围内的多个控制器

是否有多个控制器在范围内以便您可以在整个文档中绑定到每个控制器之间来回切换？保持范围内的多个控制器

举例来说，如果我想交错的两套价格/数量/总的价值，是不好的设计做到以下几点：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本身中实例化。

来源

2014-02-10 Alain

我想说你的使用案例是有点人为的。你的例子实际上只需要一个拥有一组对象的控制器，每个控制器都有一个数量和价格。

我想说，我不能想到两个控制器是一个好主意的情况;控制器应该是相当独立的，如果你在同一个代码上有两个控制器，你就会打开碰撞和麻烦。这并不是说你不应该嵌套逻辑 - 把逻辑放在指令中可能是一个好主意，而且这是一种控制器内的控制器 - 但是同时使用两个控制器通常意味着你想在它们之间共享数据，它可以快速笨拙。

获取用户角度需要时间，但在您的示例中，我会尝试重构您的控制器以获得一组对象，然后使用像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，如果你想在两张发票比较，你可以很容易地做到这一点你的控制器中，因为它有立即进入两者。

来源

2014-02-11 00:09:40 Hylianpuffball

真正的用例是有人在进行逐年比较时。他们可以选择任意两个“对象”，每个对象都有几十个字段，并且想要并排查看它们的属性。在这种情况下，我需要加载它们并交错数据以便于比较。 – Alain

保持范围内的多个控制器

回答

相关问题