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

AngularJS: passing ngModel from controller to directive

本文关键字：指令 控制器 ngModel AngularJS      更新时间：2023-09-26

我有一个控制器，里面有一个属性指令，这个指令需要它的父控制器的ngModel。

看这个Plunkr

虽然表单加载正确，但指令内的日志显示如下:

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

知道为什么ngModel是未定义的，为什么boundModel包含字符串'person'吗?

try this

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: '=ngModel' }表示通过ng-model属性传递boundModel属性。但是在模板中不使用ng-model属性。你有bound-model代替。

scope: {
   boundModel: '=ngModel'
},

您错误地使用了作用域变量。当你说'=ngModel'时，你说的是指令上有一个名为'ng-model'的属性，你想在你的指令中使用它作为scope.boundModel。

似乎你想使用ng-model控制器，为什么你不只是在你的指令上使用ng-model而不是boundModel?

你可以将html中的绑定模型重命名为ng-model，并从指令中删除作用域。如果你想使用ngModelController，你需要像这样在指令链接函数中注入它:

return {
    restrict: 'A',
    required: '^ngModel',
    scope: {},
    controller: function($scope){
    },
    link: function ($scope, $elem, $attrs, ngModel) {
      console.log($attrs);
    }
  }

使用ngModelController，你可以在html中设置绑定到ng-model的人的有效性等。

相关文章：