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

Question

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

基本上，我希望能够将ng-model从父指令传递给子指令。我只能使用2向绑定值，但是这样我将无法在child元素的parent指令中使用ng-
change。我也可以使用ng-click，但这不适用于非单击式更改（例如，文本区域而不是复选框）。所以我想知道是否有一种方法可以使自定义指令具有ng-
model / ng-
change对，类似于输入，按钮，文本区域和其他html元素的方式。我想避免使用emit，on，watch，传递回调等。我只想能够对自定义指令执行[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');

我的角度版本是1.4.8 btw。

谢谢 ：）

Answer 1

几乎与@georgeawg答案相同，但使用指令方法（自component1.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>