AngularJS 모기지 응용 프로그램을위한 모듈 식 플러그 앤 플레이 유형 지시문을 만드는 데 도움이 필요합니다.

Question

저는 Angular (그리고 JS는 그 문제에 대해)에 상당히 익숙하며 범위, 컨트롤러 및 지시문을 머리 속에 감싸려고합니다. 나는 현재 두 가지 대출 비용을 비교할 수있는 비교 모기지 앱을 개발 중이다. 이상적으로, 모기지 데이터의 각 집합은 필요한 계산을 수행하고 해당 데이터 세트의 각각의 "모듈"(양식, 테이블, 할부 상환 일정, 그래프 등)에 바인딩 할 하나 이상의 (또는 여러 개의) 지시문으로 전달됩니다. 모든 데이터 집합의 "모듈"이 동적으로 업데이트되기를 원합니다. 따라서 대출 A의 형식이 대출 A의 모든 모듈에 자동으로 반영됩니다. 각 대출의 일부 데이터를 부모 컨트롤러/범위로 전달해야합니다. 그러면 대출 A와 B의 비교를 수행 할 수 있습니다.

중첩 지시어로 일부 작업을 처리 할 수있었습니다. 이 방법을 사용

<div class="col-md-6"> 
<mort-data mortgage="1" id="mort_a" ng-init="mortInstance = 1"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div ng-include="'templates/forms/userMortForm.html'"></div> 
     </div> 
     <div class="col-md-6"> 
      <div ng-include="'templates/tables/userMortTable.html'"></div> 
     </div> 
    </div> 
    <div class="row"> 
     <mort-schedule> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div id="mort1_sch" ui-grid="gridOptions" ui-grid-edit ui-grid-auto-resize class="grid"></div> 
       </div> 
      </div> 
      <label><input type="checkbox" ng-model="toggleWaste.value" ng-click="includeWaste()"> Include Insurance 
       & Tax</label> 
     </mort-schedule> 
    </div> 
</mort-data> 

.directive('mortData', function (dataServices) { 
    return { 
     restrict: 'E', 
     scope: true, 
     link: { 
      pre: function (scope, element, attrs) { 
       scope.data = {}; 
       scope.data.salePrice = 9999999; 

      //define mortgage vars here and perform calculations 
     } 
    } 
}) 
.directive('mortSchedule', function (uiGridConstants, $timeout) { 
    return { 
     restrict: 'E', 
     scope: false, 
     link: function (scope, element, attrs) { 
      scope.data.amortSchedule = {}; 

      //build amortization schedule here 
     } 
    } 
}) 

두 번 나에게 두 가지, 고립 된 모기지 데이터 세트를 제공합니다. 내가 이해할 때, 나는 각 mortData 인스턴스에 대해 상속 된 스코프를 생성하고 해당 스코프를 각각의 중첩 된 mortSchedule 지시문에 전달합니다. 그러나이 구조로 인해 결국 각 mortData 지시문의 데이터를 상위 컨트롤러로 전달하고 원하는 비교를 수행 할 수 없게됩니다. 그것은 또한 지속적으로 중첩 된 지시문에 의존하는 것처럼 보이며, 이는 지저분하고 제한적일 수 있습니다.

이 프로젝트에 접근하는 "각도"방법이 무엇인지 궁금합니다. 나는 그것에 대해 완전히 잘못 될 것인가? 당신의 도움을 주셔서 감사합니다.

Answer 1

AngularJS와이 방법

1. 당신은 고립 된 범위를 사용할 수의 몇 범위 상속 패턴을 변경하는 방법을 제공합니다 (지침 정의에 scope: { something: something} 포함). 격리 된 범위는 일반 상속 트리에서 가져와 자신의 독립적 인 존재를 갖습니다. 격리 된 범위 내에 무엇이 있어야하는지, 그리고 이러한 객체가 외부 세계와 어떤 관계를 가져야 하는지를 선택할 수 있습니다.

   scope: { a: @outerA // Text binding, b: &outerB // One-way data binding c: =outerC // Two way data binding }

2. 당신은 매개자 범위를 가질 수있다 (당신의 지시 정의의 transclude: true 포함). transcluded 범위는 범위 외부 지시문에 액세스 할 수 있습니다. 이 유형의 지정 문은 지정 문이 임의의 값으로 랩되고 플러그 앤 플레이되도록하려는 경우에 유용합니다. 이것은 내가 생각하는 유스 케이스에서 작동합니다. link 기능에 반대

   angular.module('docsTransclusionExample', []) 
   .controller('Controller', ['$scope', function($scope) { 
       $scope.name = 'Tobias'; 
   }]) 
   .directive('myDialog', function() { 
       return { 
       restrict: 'E', 
       transclude: true, 
       scope: {}, 
       template: '<div ng-controller="Controller"> 
           <my-dialog>Check out the contents, {{name}}!</my-dialog> 
          </div>', 
       link: function(scope) { 
        scope.name = 'Jeff'; 
       } 
       }; 
   }); 
   

예를 들어이 예는, 외부 컨트롤러 ($의 scope.name = '토비아스')에 액세스 할 수 있습니다 ($scope.name = 'Jeff')