【问题标题】:Passing value from directive back to ng-model将值从指令传回 ng-model
【发布时间】:2014-11-18 06:34:33
【问题描述】:

我会尽量解释清楚,虽然有点晚了。

我正在创建一个指令,该指令将具有基于下拉列表的大量输入字段。我本质上是在创建一个我想传递给父级的自定义选项。我将调用模板中的ng-model 值传递到指令中。我想获取自定义选项的值并将其传递回指令中 ng-model 的值。

我正在尝试做一个 plunker 设置:

http://plnkr.co/edit/fhSgkSaLIBxs8BhQbdWW?p=preview

如果您查看此代码,您可以在 html 文件中看到页面上有一个输入,然后它调用指令。输入从对象name.first 中获取一个值。然后该指令采用值name.test。在指令中,我有一个具有附加输入字段的模板。我试图从这个内部输入字段中获取值并将值传递回name.test 值。现在,我知道我可以将指令输入的 ng-model 设置为向下传递的 ngModel 值,但这只是一个简单的示例,在实际代码中,我将有额外的复选框和单选元素,我想作为对象收集并传回ng-model。如果有效,则单击该按钮将记录一个对象,例如{ first: 'Felipe', test: { new_value: 'My Inner Value' } }

【问题讨论】:

  • 不完全。如果您查看问题,预期结果的格式在最后一行。如果您查看示例中的控制台,任务变量仍然只有 first 属性。

标签: javascript angularjs angularjs-directive angular-ngmodel


【解决方案1】:

你在指令中使用 ng-model 有点让人困惑,因为你在指令中的 ng-model 和输入标签不一样。

如果我正确理解您的问题,以下应该可以解决它

app.directive('myDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {
      newModel: '=ngModel'
    },
    template: '<div class="some">' +
      '<p ng-bind="newModel"></p><input ng-model="newModel.new_value"></div>',
    replace: true,
    require: '?ngModel'
  };
});

【讨论】:

  • 是的!就是这样。通过尝试创建对象并将其分配到指令的链接函数中,我想多了。
猜你喜欢
  • 1970-01-01
  • 2017-12-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-07
  • 2014-05-26
  • 2016-12-20
相关资源
最近更新 更多