如何向组件添加 ng-model 功能

Question

Angular ng-model 上的 ng-change 传递给子指令

基本上，我希望能够将 ng-model 从父指令传递到子指令。我可以只使用 2 向绑定值，但那样我就无法在子元素的父指令中使用 ng-change。我也可以使用 ng-click，但这不适用于非点击更改（例如文本区域而不是复选框）。所以我想知道是否有一种方法允许自定义指令有一个 ng-model/ng-change 对，类似于输入、按钮、文本区域和其他 html 元素的方式。我想避免使用 emits、ons、watches、传递回调等。我只想能够在自定义指令而不是输入上执行 [input type="checkbox" ng-model="ngModel"]。

父模板

<child ng-model="x" ng-change="x()"></toggle>

父指令

$scope.x = function() {console.log('hi')};

子模板

<div>
     <input type="checkbox" ng-model="ngModel">
</div>

子指令??

$scope.ngModel = $element.controller('ngModel');

我的 angular 版本是 1.4.8 btw。

谢谢:)

Answer 1

如何向组件添加 `ng-model` 功能

输入使用单向<输入，输出使用ngModelController API：

app.component("checkboxComponent", {
    bindings: { ngModel: '<' },
    require: { ngModelCtrl: 'ngModel' },
    template: `
          <input type=checkbox ng-model='$ctrl.ngModel'
                 ng-change="$ctrl.ngModelChange()" />
    `,
    controller: function() {
      this.ngModelChange = () => {
        this.ngModelCtrl.$setViewValue(this.ngModel);
      };
    }
})

组件对输入使用单向绑定，对输出使用$setViewValue。使用此方法，ng-change 起作用，组件可以用作表单元素：

<form name="form1">
     <checkbox-component name="input1" ng-model="vm.formData.input1"
                         ng-change="vm.inp1Change()">
     </checkbox-component>
</form>

有关详细信息，请参阅

The DEMO

angular.module("app",[])

.component("checkboxComponent", {
    bindings: { ngModel: '<' },
    require: { ngModelCtrl: 'ngModel' },
    template: `
        <fieldset>
          <h3>Checkbox Component</h3>
          <input type=checkbox ng-model='$ctrl.ngModel'
                 ng-change="$ctrl.ngModelChange()" />
                 Checkbox
        </fieldset>
    `,
    controller: function() {
      this.ngModelChange = () => {
        this.ngModelCtrl.$setViewValue(this.ngModel);
      };
    }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <checkbox-component ng-model="value"
                        ng-change="value2=value"> 
    </checkbox-component>
    <fieldset>
      <p>value = {{value}}</p>
      <p>value2 = {{value2}}</p>
    </fieldset>
  </body>

Answer 2

与@georgeawg 的回答几乎相同，但使用指令方法（因为 component 是在 1.5+ 中引入的，但作者有 1.4.8）：

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {

}])
.directive('inputComponent', [function () {
        var myDirective = {
            restrict: 'E',
            require: 'ngModel',
            templateUrl: "checkboxComponent.html",
            link : function(scope, element, attrs, ngModelCtrl){
                scope.updateModel = function(ngModel) {
                    ngModelCtrl.$setViewValue(ngModel);
                }
            }
        }
        return myDirective;
}]);

fieldset {
  margin-top: 1em;
}

<script src="//code.angularjs.org/1.4.8/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    
    <input-component ng-model="value"
                     ng-change="value2=value"></input-component>
                     
                                        
    <fieldset>
      <p>value = {{value}}</p>
      <p>value2 = {{value2}}</p>
    </fieldset>
    
  </div>
  
  <script type="text/ng-template" id="checkboxComponent.html">
    <div>
         <input type="text" ng-model="ngModel" ng-change="updateModel(ngModel)" />
    </div>
  </script>
  
</div>

如何向组件添加 ng-model 功能

How to add ng-model functionality to a component

angularjs

angularjs-directive

angularjs-ng-model

angularjs-components

angularjs-ng-change

Angular ng-model 上的 ng-change 传递给子指令

如何向组件添加 `ng-model` 功能

The DEMO