错误：无法使用运算符'in'搜索

Question

AngularJS - 将数据从子组件传递到父组件

我有两个AngularJS组件，search和form。 search是form的孩子。 search包含一个文本输入字段。我想form发送search输入字段中的值。

我的方法是将一个函数绑定到search该函数会将search输入字段绑定到form。当 AngularJS 尝试绑定这些值时，我收到错误：

Cannot use 'in' operator to search for '$ctrl' in MyInputValue .

是否有更好的解决方案方法，或者我在代码中的某处输入了拼写错误？

search.component.js

class SearchComponentController{}
angular
    .module('app')
    .component('search', {
        bindings: {
            onSearch: '&'
        },
        templateUrl: 'search.template.html',
        controller: [SearchComponentController]
    });

搜索模板.html

<div>
    <input ng-model="$ctrl.keyword" />
    <button ng-click="$ctrl.onSearch($ctrl.keyword)">Search</button>
</div>

表单组件.js

class FormComponentController {
    constructor {}
    onSearch(keyword) {
        console.log(keyword);
        // perform logic
    }
}
angular
    .module('app')
    .component('form', {
        templateUrl: 'form.template.html',
        controller: [FormComponentController]
    });

表单模板.html

<div>
    <search on-search="$ctrl.onSearch()"></search>
</div>

堆栈跟踪

script.js:14791 TypeError: Cannot use 'in' operator to search for '$ctrl' in MyInputValue
    at fn (eval at compile (http://localhost:9005/js/script.js:15642:15), <anonymous>:4:59)
    at SearchComponentController.destination.(anonymous function) [as onSearch] (http://localhost:9005/js/script.js:10751:22)
    at fn (eval at compile (http://localhost:9005/js/script.js:15642:15), <anonymous>:4:278)
    at callback (http://localhost:9005/js/script.js:27463:17)
    at Scope.$eval (http://localhost:9005/js/script.js:18533:28)
    at Scope.$apply (http://localhost:9005/js/script.js:18632:25)
    at HTMLButtonElement.<anonymous> (http://localhost:9005/js/script.js:27468:23)
    at defaultHandlerWrapper (http://localhost:9005/js/script.js:3785:11)
    at HTMLButtonElement.eventHandler (http://localhost:9005/js/script.js:3773:9)

错误来自 SearchComponentController.destination

case '&':
    if (!optional && !hasOwnProperty.call(attrs, attrName)) {
      strictBindingsCheck(attrName, directive.name);
    }
    // Don't assign Object.prototype method to scope
    parentGet = attrs.hasOwnProperty(attrName) ? $parse(attrs[attrName]) : noop;
    // Don't assign noop to destination if expression is not valid
    if (parentGet === noop && optional) break;
    destination[scopeName] = function(locals) {
      return parentGet(scope, locals);
    };
    break;

此 switch 语句来自 AngularJS 1.6.8，从 initializeDirectiveBindings() 调用，该 ets 向上$watches用于隔离作用域和控制器绑定。

Answer 1

使用 1/2 方式绑定而不是 &.

bindings: {
  onSearch: '<'
},

Answer 2

1. 元件

angular.module('newsApp').component('newsDetail', {
// ...
bindings: {
  onUpdate: '&' // Two-Way binding to Container
}
// ...
var $ctrl = this;
$ctrl.update = function(id, value) {
  $ctrl.onUpdate({id: id, value: value}); // Arguments must be an Object
};

<button ng-click="$ctrl.update(2020, 'foobar')">
  Upgrade
</button >

2、容器

angular.module('newsApp').component('newsList', {
// ...
$ctrl.updateNews = function(id, value) {
  list[id] = value;
};

<detail ... on-update="$ctrl.updateNews (id, value)"> <!-- Pass to component -->
</detail>