Question

我有一个模板，可以在运行时动态创建输入元素。我想将输入此输入元素的数据捕获到我的模型中。我试图使用ng-model实现这一目标。但是，它不起作用。在检查元素时，我看到正确的表达式已绑定到ng-model，但它没有更新我的模型。这是我的代码：

模板：

<div child-ng-model="userReg.candidateData.PrimarySkills">
   <!-- this div creates an input element on runtime -->
</div>

指令：

(function (window) {
  'use strict';

    angular.module('myApp.userRegistration.directive')
    .directive('childNgModel', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            scope: {
                childNgModel: '@'
            },
            link: function (scope, element, attrs) {
                var el = element.children().eq(0);
                el.attr('ng-model', scope.childNgModel);
                $compile(el)(scope);
            }
        }
    }]);
})(window);

您可以在下面看到分配给ng-model的正确值：

我在输入字段中输入的文本未被我的模型（userReg.candidateData.PrimarySkills）捕获。为什么会这样？我在这里做错了什么？

Answer 1

问题是您在指令中创建了一个独立的范围。因此，ngModel无法写入外部范围变量。

尝试以下方法：

(function (window) {
  'use strict';

   angular.module('myApp.userRegistration.directive')
    .directive('childNgModel', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            scope: true, // create a normal child scope
            link: function (scope, element, attrs) {
                var el = element.children().eq(0);
                el.attr('ng-model', attrs.childNgModel); // just get the attribute value
                $compile(el)(scope);
            }
        }
    }]);
})(window);

Answer 2

该指令中没有该模型。

您必须先建立双向绑定：

scope: {
  childNgModel: '='

将输入的模型更改为childNgModel：

el.attr('ng-model', "childNgModel");
$compile(el)(scope);

现在输入在指令内更新childNgModel，指令本身与指令外的userReg.candidateData.PrimarySkills链接。

Answer 3

您使用＆＃39; @＆＃39;。

将模型作为插值字符串传递

尝试使用＆＃39; =＆＃39;代替。

如果您想要模型中包含的插值字符串，则需要用{{ child-ng-model="userReg.candidateData.PrimarySkills" }}

包围它

但是，在指令中使用相同的名称和指令中的模型是不好的做法。您最好为模型创建一个属性。

＆＃13;

function MyController() {
  this.userReg = {candidateData: {PrimarySkills:["123", "456", "789"]}};
}
function childNgModel($compile) {
  return {
    restrict: 'A',
    scope: {
      value: '='
    },
    link: function (scope, element, attrs) {
      console.log(scope.value);
    }
  }
}

angular.module('app', []);
angular.module('app')
  .controller('MyController', MyController)
  .directive('childNgModel', childNgModel);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as ctrl">
    <div child-ng-model value="ctrl.userReg.candidateData.PrimarySkills">
    </div>
  </div>
</div>

＆＃13;

或者这个

＆＃13;

function MyController() {
  this.userReg = {candidateData: {PrimarySkills:["123", "456", "789"]}};
}
function childNgModel($compile) {
  return {
    restrict: 'A',
    scope: {
      value: '@'
    },
    link: function (scope, element, attrs) {
      console.log(scope.value);
    }
  }
}

angular.module('app', []);
angular.module('app')
  .controller('MyController', MyController)
  .directive('childNgModel', childNgModel);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as ctrl">
    <div child-ng-model value="{{ctrl.userReg.candidateData.PrimarySkills}}">
    </div>
  </div>
</div>

＆＃13;

在动态创建的元素

3 个答案: