保持範圍內的多個控制器

是否有多個控制器在範圍內以便您可以在整個文檔中綁定到每個控制器之間來回切換？保持範圍內的多個控制器

舉例來說，如果我想交錯的兩套價格/數量/總的價值，是不好的設計做到以下幾點：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

保持範圍內的多個控制器

回答

相關問題