Question

我正在尝试创建一个自定义表单组件，我可以使用ng-model进行绑定。我已经找到了关于如何使用指令执行此操作的大量教程，但我似乎无法弄清楚如何使用组件执行此操作，因为您不能使用组件的link函数，并尝试传入与控制器的ngModel依赖关系会导致此错误：

Error: [$injector:unpr] Unknown provider: $ngModelProvider <- $ngModel

我也看过this并尝试了这个：

bindings: {
    value: "=ngModel"
}

我试过了，然后在控制器中设置值以进行双向绑定，但它似乎不起作用。

Answer 1

这是与Angular中的组件的常见误解。组件不应修改其自身范围之外的数据。所以，如果你想这样做，你真的应该使用指令。

以下是documentation：

的引用

组件只控制自己的视图和数据：组件应该永远不要修改超出自己范围的任何数据或DOM。一般，在Angular中，可以在应用程序的任何位置修改数据通过范围继承和手表。这很实用，但也可以当不清楚应用程序的哪个部分时会导致问题负责修改数据。这就是组件指令的原因使用隔离范围，因此不需要整类范围操作可能的。

Answer 2

我认为角度推荐的回调方式（例如ngclick）是使用方法绑定类型：＆amp;

以下是一个例子：https://plnkr.co/edit/nySL4OoMpJPkGXX8j78U?p=preview

注意这部分，方法绑定类型是定义的，而internalChange函数执行父/调用者提供的任何角度表达式。

  bindings: {
      valueChanged: '&?'
  }, 
  controller: function() {
      this.$onInit = function() {
          this.value = 'initial value';
      };
      this.internalChange = function() {
          if (this.valueChanged) {
              this.valueChanged({ $value: this.value} );
          }
      };  
  }

然后这里有两种方法可以使用表达式，注意组件定义的$ value。

<my-comp data-value-changed="$ctrl.someFunction($value)"></my-comp> <br 
<my-comp data-value-changed="$ctrl.someProperty = 'Bla: ' + $value"></my-comp>

我试图将其设置为显示各种各样的东西。

方法绑定采用角度表达式。我有两个例子，一个在父控制器上调用一个函数，另一个调用属性
此表达式使用父/调用者的范围执行（即：可以访问父控制器属性，函数等...）
组件是通过将绑定名称作为函数执行来调用它的
组件可以提供键/值的映射，其中键是调用者可以使用的命名属性（在我的示例中为$ value）

这是一个很好的解决方案，只要您对组件对父级进行“推送”更新即可。例如，如果您只想在特定时间从组件中获取数据（可能是由于时间或内存限制），那么针对该问题还有许多其他不同的解决方案。

希望这有帮助！

将ngModel传递给AngularJS组件

2 个答案: