需要帮助为 AngularJS 抵押贷款应用程序创建模块化、即插即用类型的指令-解网

问：

我对 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 指令传递到父控制器并执行所需的比较。似乎它还将取决于不断嵌套的指令，这让我感到混乱和限制。

我想知道处理这个项目的“Angular”方式是什么。我做错了吗？感谢您的帮助。

JavaScript angularJS 作用域 angularjs-scope using 指令

您可以使用独立作用域（在指令定义中包括 a）。孤立的作用域将从一般继承树中取出，并将具有自己的独立存在。您可以选择哪些对象应该驻留在您的隔离范围内，以及这些对象应该与外部世界建立什么关系，就像这样。scope: { something: something}

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

您可以有一个包含的作用域（在指令定义中包括 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')

上一个：分离文件中的 AngularJs 1.X 自定义指令不起作用

下一个：共享同一作用域的多个指令

需要帮助为 AngularJS 抵押贷款应用程序创建模块化、即插即用类型的指令

Need help creating modular, plug-and-play type directives for an AngularJS mortgage app

评论