使用ng-model的AngularJS自定义表单组件/指令

Question

角度自定义表单组件/指令和$ dirty属性

使用常规输入时，例如

<form name="myForm">
  <input type="text" ng-model="foobar">
</form>

在输入框中键入后myForm.$dirty为true。

我想创建一个简单的指令，例如

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      fooBar: '='
    },
    template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>'
  };
});

样本用法为

<form name="myForm">
  <my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>

在用户单击两个按钮中的任何一个之后，myForm$dirty设置为true。

这是如何完成的？

Answer 1

实施自定义表单控件（使用ngModel）

在DDO中使用ngModel控制器和require属性的对象形式：

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    require: { ngModelCtrl: 'ngModel' },
    scope: {
      ngModel: '<'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    template: 
       `<div>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
              Set foo
          </button>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
              Set bar
          </button>
       </div>`,
    controller: function ctrl() {}
  };
});

用法：

<form name="myForm">
    <input type="text" ng-model="foobar">
    <my-directive ng-model="foobar"></my-directive>
</form>

通过实例化和使用ng-model控制器，该指令将根据需要自动设置表单控件。

演示

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    require: { ngModelCtrl: 'ngModel' },
    scope: {
      ngModel: '<'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    template: 
       `<div>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('foo')">
              Set foo
          </button>
          <button ng-click="$ctrl.ngModelCtrl.$setViewValue('bar')">
              Set bar
          </button>
       </div>`,
    controller: function ctrl() {}
  };
});

<form name="myForm">
    <input type="text" ng-model="foobar">
    <my-directive ng-model="foobar"></my-directive>
</form>

我建议隔离范围ngModel作为输入。输出应使用$ setViewValue方法完成。

有关更多信息，请参见

• AngularJS开发人员指南-实现自定义表单控件（使用ngModel）

• AngularJS开发人员指南-基于组件的应用程序体系结构