angularjs - How to add ng-model functionality to a component

Question

Welcome To Ask or Share your Answers For Others

angularjs - How to add ng-model functionality to a component

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

angularjs - How to add ng-model functionality to a component

Angular ng-change on ng-model passed into child directive

Basically, I want to be able to pass in ng-model from a parent directive to a child directive. I could just in a 2-way binded value, but then I wouldn't be able to use a ng-change in the parent directive on the child element. I could also use ng-click, but this wouldn't work with a non-clicking change (such as a text area instead of a checkbox). So I'm wondering if there's a way to allow a custom directives to have a ng-model/ng-change pair similar to how inputs, buttons, text areas and other html elements can. I want to avoid using emits, ons, watches, passing callbacks, etc. I just want to be able to do [input type="checkbox" ng-model="ngModel"] on a custom directive instead of input.

Parent Template

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

Parent Directive

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

Child Template

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

Child Directive ??

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

My angular version is 1.4.8 btw.

Thanks :)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:42:14+0000

How to add `ng-model` functionality to a component

Use one-way < input for input and use the ngModelController API for output:

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);
      };
    }
})

The component uses one-way binding for input, and $setViewValue for output. With this method, the ng-change works, and the component can be used as a form element:

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

For more information, see

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>

Categories

angularjs - How to add ng-model functionality to a component

angularjs - How to add ng-model functionality to a component

Angular ng-change on ng-model passed into child directive

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

How to add `ng-model` functionality to a component

The DEMO

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags