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

本文介绍了如何向组件添加 ng-model 功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

父模板

</toggle>

家长指令

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

子模板

儿童指令??

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

顺便说一下，我的 Angular 版本是 1.4.8.

谢谢:)

解决方案

与@georgeawg 的答案几乎相同，但使用指令方法(因为 component 是在 1.5+ 中引入的，但作者有 1.4.8):

angular.module('myApp', []).controller('MyCtrl', ['$scope', function MyCtrl($scope) {}]).directive('inputComponent', [function () {var myDirective = {限制:'E'，要求:'ngModel'，templateUrl: "checkboxComponent.html",链接:函数(范围、元素、属性、ngModelCtrl){scope.updateModel = 函数(ngModel){ngModelCtrl.$setViewValue(ngModel);}}}返回我的指令；}]);

fieldset {边距顶部: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><字段集><p>value = {{value}}</p><p>value2 = {{value2}}</p></fieldset>

<script type="text/ng-template" id="checkboxComponent.html"><div><input type="text" ng-model="ngModel" ng-change="updateModel(ngModel)"/>

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 :)

解决方案

Almost the same as @georgeawg answer, but using directive method (since component was introduced in 1.5+, but author has 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 功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！