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作為記錄者的有效性等在這里 。