Блог

Я довольно новичок в Angular (и JS, если на то пошло), и пытаюсь разобраться в области видимости, контроллерах и директивах. В настоящее время я работаю над сравнительным ипотечным приложением, которое позволит пользователю сравнивать стоимость двух кредитов. В идеале каждый набор данных об ипотеке будет передаваться одной (или нескольким) директиве (директивам), которые будут выполнять необходимые вычисления и привязываться к соответствующим «модулям» этого набора данных (форма, таблица, график амортизации, графики и т. Д.). Я бы хотел, чтобы все «модули» набора данных обновлялись динамически, поэтому изменение формы Loan A будет автоматически отражаться во всех модулях Loan 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
                amp; 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 в родительский контроллер и выполнять желаемые сравнения. Похоже, это также будет зависеть от постоянно вложенных директив, что кажется мне беспорядочным и ограничивающим.

Мне интересно, каков «угловой» подход к этому проекту. Я все делаю неправильно? Спасибо за вашу помощь.

AngularJS предоставляет способы изменить шаблон наследования области несколькими способами

1. Вы можете использовать изолированную область видимости (включите a scope: { something: something} в определение вашей директивы). Изолированные области будут удалены из общего дерева наследования и будут иметь свое собственное независимое существование. Вы можете выбрать, что должно находиться в вашей изолированной области и какое отношение эти объекты должны иметь к внешнему миру, например.

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

2. У вас может быть закрытая область видимости (включите a transclude: true в определение вашей директивы). Закрытые области имеют доступ к области за пределами директивы. Этот тип директив полезен, когда вы хотите, чтобы директива обтекала произвольные значения и была подключаемой и воспроизводимой. Я думаю, это работает в вашем случае использования.

    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 = ‘Tobias’) в отличие от link функции ( $scope.name = 'Jeff' )