Question

我创建了一个自定义指令名称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}}", 
        }

    })

Answer 1

我更新了你的plunkr：updatedMyPlunker

我通过其隔离的范围将usermodel传递给kid指令。

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

     <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}}",





                }

            })

Answer 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>

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

2 个答案: