범위에 여러 컨트롤러 유지

범위 내에서 여러 컨트롤러를 사용하여 문서 전체에 바인딩 할 때 앞뒤로 이동할 수 있습니까? 나는 가격/수량/총 두 세트의 값을 인터리브 할 경우, 그것은 다음과 나쁜 디자인 예를 들어범위에 여러 컨트롤러 유지

입니다 : 또는 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) 프레임 워크에서 바인딩하는 요소가 View 자체가 아닌 ViewModel에서 인스턴스화되는 데 익숙합니다.

출처

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

범위에 여러 컨트롤러 유지

답변

관련 문제