【问题标题】：ng model value printing undefined inside the custom directiveng 模型值在自定义指令中打印未定义
【发布时间】：2016-02-02 16:21:22
【问题描述】：

我正在创建一个自定义指令，它采用一个由输入类型 textarea 组成的简单模板，正在将 ng-model 分配给 ngmodel，并在其中创建一个链接函数，正在创建一个 on change 事件，在该事件中我试图获取 ngmodel 值，但它的 printing undefined，请帮我解决这个问题，在这里发布我尝试过的链接，如果需要更正 plunkr ,代码从这里开始

// Code goes here

var app = angular.module('myApp',[]);

app.directive('markdownEditor', function () {
  return {
    restrict: 'E',
    scope: {
      ngModel: "="
    },
    require:'ngModel', 
    template:
    '<textarea ng-model="ngModel"></textarea>' +
    '{{ ngModel}}',
    link:function(scope,ele,attr,ctrl){
      ele.on("keydown",function(){
        alert(scope.ctrl)
      })
    }
  }
});

app.controller('DemoCtrl', function ($scope) {
  var x= $scope.markdown;
});

<html ng-app="myApp">
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <div ng-controller="DemoCtrl">
      <h3>Markdown editor</h3>
      <markdown-editor ng-model="markdown" name="markdown"></markdown-editor>
    </div>
  </body>
</html>

【问题讨论】：

尝试将模型控制器引用为ctrl 而不是scope.ctrl
将scope.ctrl更改为scope.ngModel并将keydown更改为keyup。
错了你没有绑定到你的ngModel 中的scope.ctrl。另请注意，如果您希望在事件处理程序中进行范围更改，您可能必须调用 $apply。这发生在角度范围之外。

标签： javascript angularjs

【解决方案1】：

这里至少有两件事出了问题：你试图提醒控制器本身，而不是 ng-model 变量，并且检查 keydown 意味着你总是会落后一个键。

试试这个：

var app = angular.module('myApp', []);
app.directive('markdownEditor', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        template: '<textarea ng-model="foo"></textarea>',
         link: function(scope, ele, attr, ctrl) {
            ele.on("keyup", function() { // (or use "change" if you don't need to check every single keystroke)
                alert(scope.foo);
            })
        }
    }
});

app.controller('DemoCtrl', function($scope) {
});

https://plnkr.co/edit/wf0NBnQqmgcwE606xeZg

（我会强烈建议不要将您的变量命名为“ngModel”——这非常令人困惑，因为它很难区分变量和 ngModel 指令本身。）

【讨论】：

如果我想在运行时获取 ngmodel 意味着我应该怎么做
我不明白您所说的“在运行时获取 ngmodel”是什么意思——您能澄清一下您要做什么吗？
实际上我想创建一个指令，在 html 中使用该指令时自动获取 ngmodel 值，例如
仍然没有完全关注。您是否尝试为您的 ng-model 使用动态变量名称？如果是这样，请参阅stackoverflow.com/questions/12553617/…
是的，我需要提供一个动态 ngmodel 变量名称，并且我必须在我的自定义指令中访问

【解决方案2】：

您需要添加范围属性的名称，例如：

警报(scope.ngModel)

PS：请避免使用`ngModel` 作为变量名

// Code goes here

var app = angular.module('myApp',[]);

app.directive('markdownEditor', function () {
  return {
    restrict: 'E',
    scope: {
      ngModel: "="
    },
    require:'ngModel', 
    template:
    '<textarea ng-model="ngModel"></textarea>' +
    '{{ ngModel}}',
    link:function(scope,ele,attr,ctrl){
      ele.on("keyup",function(){
        alert(scope.ngModel)
      })
    }
  }
});

app.controller('DemoCtrl', function ($scope) {
  var x= $scope.markdown;
});

<html ng-app="myApp">

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <div ng-controller="DemoCtrl">
    <h3>Markdown editor</h3>
    <markdown-editor ng-model="markdown" name="markdown"></markdown-editor>
  </div>
</body>

</html>

【讨论】：

PS：请避免使用ngModel 作为变量名

PS：请避免使用`ngModel` 作为变量名