Angular 形式 1.3 紧耦合

Question

你们中是否有人认为 Angular 1.3 中的表单导致控制器和 DOM 之间的紧密耦合？这是 Angular 的反模式。

例如，当为表单赋予 name='formExample' 属性时，要以程序方式将其设置为脏或无效，在控制器中我们必须执行 $scope.formExample.$setDirty()

这是一种不好的做法！

等待听到你的想法！

例子：

this.onSaveClicked = function () {
        that.saveMessage = that.SAVING_IN_PROGRESS;

        //Update project with changes
        ProjectsBLL.update($scope.entities.project.Model, function (data) {
            $scope.entities.project.Model = data;
            $scope.configurationForm.$setPristine();
            that.saveMessage = that.SAVING_FINISHED;
        }, null)
    }

Answer 1

听起来您不希望控制器中出现以下行

$scope.configurationForm.$setPristine();

为此，一种方法是：

• 更改ProjectsBLL.update 以返回承诺而不是接受回调（如何做到这一点可能超出了这个问题的范围）。然后还从控制器中的函数返回来自then 的派生承诺：

  this.onSaveClicked = function () {
    that.saveMessage = that.SAVING_IN_PROGRESS;
  
    //Update project with changes
    return ProjectsBLL.update($scope.entities.project.Model).then(function (data) {
      $scope.entities.project.Model = data;
      that.saveMessage = that.SAVING_FINISHED;
    });
  }
  

• 然后使用自定义指令而不是ng-click 来调用保存函数。可能有几种方法可以做到这一点，但一种是添加一种将函数作为属性的方法：

  <button type="button" my-submit="onSaveClicked()">Save</button>
  

  它添加了一个手动的click 监听器，在点击时调用传递的函数，并在其返回的promise 被解析后，在requireed 表单上调用$setPristine()：

  app.directive('mySubmit', function($parse) {
    return {
      require: '^form',
      link: function(scope, element, attrs, formController) {
        var callback = $parse(attrs.mySubmit);
        element.on('click', function() {
          callback(scope, {}).then(function() {
            formController.$setPristine();
          });
        });
      }
    };
  });
  

这个版本，只是使用$timeout 来模拟对$http 的调用，可以在http://plnkr.co/edit/IdcfQ4N9MhDKdvyorzeO?p=preview 看到