AngularJS：将ngModel从控制器传递到指令

Question

我有一个带有属性指令的控制器，该指令需要它的控制器父代的ngModel。

看到这个Plunkr 。

问题

尽管正确加载了表单，但伪指令中的日志显示如下：

a.$…t.aa {$attr: Object, $$element: R[1], fieldValidator: "", boundModel: "person", ngModel: undefined}

知道为什么ngModel未定义以及boundModel包含字符串“ person”吗？ 我一直在盯着这个...

Answer 1

尝试这个

app.directive('fieldValidator', [function(){
  return {
    restrict: 'A',
    scope: {
      boundModel: '='
    },
    controller: function($scope){

    },
    link: function ($scope, $elem, $attrs) {
      console.log($scope.boundModel);
    }
  }
}]);

就像其他人说的那样，在此指令中没有ng-model。 boundModel: '='是boundModel: '=boundModel'

如果要访问boundModel，则只需使用$ scope.boundModel忽略$ attr中显示的内容，即可猜测不是您所需要的。

Answer 2

{ boundModel: '=ngModel' }表示您通过ng-model属性传递boundModel属性。 但是在模板中，您不使用ng-model属性。 您有bound-model 。

Answer 3

scope: {
   boundModel: '=ngModel'
},

您错误地使用了范围变量。 当您说“ = ngModel”时，您说指令上有一个名为“ ng-model”的属性，您想在指令内将其用作scope.boundModel。

看来您想使用ng-model控制器，为什么不只在指令上使用ng-model而不是boundModel？

您可以将html中的bound-model重命名为ng-model，然后从指令中删除作用域。 如果要使用ngModelController，则需要将其注入指令链接函数中，如下所示：

return {
    restrict: 'A',
    required: '^ngModel',
    scope: {},
    controller: function($scope){

    },
    link: function ($scope, $elem, $attrs, ngModel) {
      console.log($attrs);
    }
  }

随着ngModelController然后你可以设置绑定到NG-模型的HTML作为记录者的有效性等在这里 。