Angularjs 如何使用初始值预先填充计算表单？

我有一个很长的计算表单，希望为显示初始结果预先填充一些值。这些初始值应存在于模板中，以便于编辑。看起来，角度的方法是使用一个指令读取输入值字段并用这些值初始化应用程序

以下是从输入字段设置模型值的一种方法：

<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>

资料来源：

不幸的是，这在我的应用程序中不起作用。将显示值，但不会计算结果。我必须手动填写浏览器中的字段才能开始计算

在我的控制器中监视输入字段，如下所示：

$scope.$watch(
  'inputValues.permeatCapacity',

  function (newValue, oldValue) {
    if (newValue === oldValue) {
      return;
    }

    permeatCapacity = $scope.inputValues.permeatCapacity;
    permeatPerDay = permeatFactory.getPermeatPerDay(permeatCapacity);

    $scope.permeatPerDay = $filter('number')(permeatPerDay, 2);
  }
);

解决这个问题的最佳方法是什么？或者Angular.js中有更好的方法吗

更新

我刚刚在控制器中发现了一种非常糟糕的方法，在初始化后使用绑定计算更新输入字段。这不仅感觉是个坏主意，初始值也不存在于模板中：

$timeout(function () {
  $scope.inputValues.overallRecovery = 40;
  $scope.inputValues.permeatCapacity = 7.2;
}, 0);

<input type="text" id="overall-recovery" value="40" ng-model="inputValues.overallRecovery" initial-value>

相比之下，控制器中的初始对象会填充字段，但不会触发观察者（对于绑定计算很重要）：

---

但是有一个更好的方法可以做到这一点，不是吗？

不知道为什么你需要一个指令，除非我不完全理解这个问题。在作用域中旋转模型，在控制器上的何处设置值，然后使用ngmodel绑定它们

在控制器中：

scope.inputValues = {permeatCapacity: 1};
scope.calc = function(){
 return permeatFactory(scope.inputValues.perMeatCapacity);
};

他认为：

<input ng-model="inputValues.permeatCapacity" type="text">

<button ng-click="calc()" />

---

在angular的更高版本中，您甚至可以在模型中的值使用ng change进行更改时运行计算。

好的，下面是我的发现。条件：

if (newValue === oldValue) {
  return;
}

在我的表中，方法阻止了最初的计算。我现在可以对我的用例使用一个非常简单的指令：

模板中的输入字段：

$timeout(function () {
  $scope.inputValues.overallRecovery = 40;
  $scope.inputValues.permeatCapacity = 7.2;
}, 0);

<input type="text" id="overall-recovery" value="40" ng-model="inputValues.overallRecovery" initial-value>

在这种情况下，值“40”在初始化期间被推送到模型

---

有什么我可以做得更好的吗？

您不能在控制器中初始化表单模型吗？谢谢您的时间和想法。不幸的是，这些值需要在模板中进行配置，并且只能通过watch方法触发计算。谢谢。我正在寻找一种解决方案，让用户直接在模板中定义默认值。因此，一个应用程序应该在这个字段中输出“30”，并触发执行计算的链接手表方法。此计算将结果填入表单中的其他字段。我该怎么做？上面链接的解决方案是一个很好的起点，但是我的观察方法没有被触发，这就是我的表格中缺少结果的原因。

angular.module('ksbApp')
 .directive('initialValue', function ($compile) {
   return {
     restrict: 'A',
     require: 'ngModel',
     link: function (scope, element, attrs, ngModel) {
       var initialValue = attrs.value;

       ngModel.$setViewValue(initialValue);
     }
   };
 });