AngularJS：如何在控制器中获取指令输入字段模型值？答案

【问题标题】：AngularJS : how to get directive input field model value in controller?AngularJS：如何在控制器中获取指令输入字段模型值？
【发布时间】：2015-09-29 20:31:03
【问题描述】：

我创建了一个自定义指令名称 Kid。因为我有一个带有usermodel 对象的输入字段。我需要在我的控制器中获得它的价值。我们可以在我的控制器中获取用户模型对象吗？实际上，在我看来，我曾经使用过相同的指令。我需要在我的控制器中获取两个指令输入值。

这是我的Plnkr

 var app =angular.module('Testappp',[]);
    app.controller('testcontroller',function(){

    })
    app.directive('kid',function(){

        return {

            restrict:"E",
            scope:{},
            template:"<input type='text' ng-model='usermodel'/>{{usermodel}}", 
        }

    })

【问题讨论】：

实际上我需要知道如何在控制器中检索相同指令的值。因为我使用了两次 child 。如果我需要在我的控制器中获取两个值。我将如何获取。我在同一个控制器中使用了两个孩子指令
我会再次解释。问题它使用指令的目的。意味着我将如何与我的控制器进行通信。在我的输入字段中，我正在做 2 路绑定。但是如果我需要使用这些值我在控制器的输入字段中插入的内容我将如何输入
是的，我知道..但是我需要使用指令来说明我为什么要问问题。我知道的简单方法。我们可以在控制器中获得指令值吗..实际上，当我学习时，我会想到这个问题隔离范围。如果我使用范围{} .it 给
好的；）！你应该在问题中说出来。请记住，90% 的自定义指令都是误用。应该执行指令来向元素添加行为，并且添加的 HTML 越少越好。

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

我更新了你的 plunkr：updatedMyPlunker

我通过其隔离范围将用户模型传递给孩子指令。

= 标志确保两个模型将通过双向数据绑定进行更新

     <body ng-app="Testappp">
        <div ng-controller="testcontroller">
          <kid usermodel="usermodel"></kid>
           <kid usermodel="usermodelSecondKid"></kid>
        </div>

    </body>    

     var app =angular.module('Testappp',[]);
            app.controller('testcontroller',function($scope){
              $scope.usermodel = '';
              $scope.usermodelSecondKid = '';
              $scope.$watch("usermodel", function(newvalue,oldvalue){
                console.log(newvalue);
              })
            })
            app.directive('kid',function(){

                return {

                    restrict:"E",
                    scope:{ usermodel: "=usermodel"
                          },
                    template:"<input type='text' ng-model='usermodel'/>{{usermodel}}",





                }

            })

【讨论】：

但我需要获取两个孩子指令的值。你只检查第一个孩子指令
@Shruti 好的，等一下
这行不通。你不应该在指令级别有两个模型。指令应该独立于您的控制器变量名称。
@dhavalcengg 是的，我意识到 ;) 快速错误。我更新了

【解决方案2】：

分叉你的plnkr。将两种方式的数据模型从控制器传递到指令。 Kid1 和 Kid2 是控制器变量。您在文本框中输入哪个值。

    <!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@*" data-semver="2.0.0" src="scruipt"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  </head>

  <body ng-app="Testappp">
    <div ng-controller="testcontroller">
      <kid ng-model="kid1"></kid>
       <kid ng-model="kid2"></kid>
    </div>

</body>
<script>
    var app =angular.module('Testappp',[]);
    app.controller('testcontroller',function(){

    })
    app.directive('kid',function(){

        return {

            restrict:"E",
            scope:{
              ngModel: '=ngModel'
            },
            template:"<input type='text' ng-model='ngModel'/>{{ngModel}}",

        }

    })
</script>
</html>

【讨论】：

我不确定将双向数据绑定变量命名为与角度指令相同的好主意。
只是作用域的变量名。你可以通过任何东西。顺便说一句，它的孩子 1 和孩子 2 不是孩子。
@Shruti 您可以将 Kid1 和 Kid2 更改为任何变量名。它将绑定到您的控制器的范围。
@Shruti 很高兴我帮助了 :)