javascript - custom - Associação do método do elemento da diretiva AngularJS-TypeError: Não é possível usar o operador 'in' para procurar 'functionName' em 1



angularjs directive restrict (2)

Como você definiu uma ligação de expressão ( & ), é necessário chamá-la explicitamente com um JSON contendo o id se desejar vinculá-lo ao HTML como edit-website="editWebsite(id)" .

De fato, o Angular precisa entender qual é esse id no seu HTML e, como não faz parte do seu escopo, você precisa adicionar o que é chamado de "locais" à sua chamada, fazendo:

data-ng-click="editWebsite({id: website.id})"

Ou como alternativa:

data-ng-click="onClick(website.id)"

Com o código do controlador / link:

$scope.onClick = function(id) {
  // Ad "id" to the locals of "editWebsite" 
  $scope.editWebsite({id: id});
}

Isso está documentado aqui, procure o exemplo que envolve "close({message: 'closing for now'})"

https://docs.angularjs.org/guide/directive

Este é o controlador do modelo principal:

app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) {
    ...     
    $scope.editWebsite = function(id) {
        $location.path('/websites/edit/' + id);
    };
}]);

Esta é a diretiva:

app.directive('wdaWebsitesOverview', function() {
    return {
        restrict: 'E',
        scope: {
            heading: '=',
            websites: '=',
            editWebsite: '&'
        },
        templateUrl: 'views/websites-overview.html'
    }
});

É assim que a diretiva é aplicada no modelo principal:

<wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview>

e esse método é chamado a partir do modelo de diretiva (website-overview.html):

<td data-ng-click="editWebsite(website.id)">EDIT</td>

PERGUNTA: Quando você clica em EDIT, este erro aparece no console:

TypeError: não é possível usar o operador 'in' para procurar 'editWebsite' em 1

Alguém sabe o que se passa aqui?


Answer #1

TL; DR; - Você está assumindo que a função vinculada está sendo passada para o componente filho. Isto está incorreto. De fato, o AngularJS está analisando o modelo de string e criando uma nova função, que então chama a função pai.

Essa função precisa receber um objeto com chaves e valores, em vez de uma variável simples.

Explicação mais longa

Isso acontece quando você vincula uma função usando '&' e tenta chamar essa função do seu controlador, passando uma variável simples em vez de um objeto que contém o nome da variável simples. As chaves de objeto são necessárias pelo mecanismo de modelagem para descobrir como passar valores para a função vinculada.

por exemplo. você chamou boundFunction('cats') vez de boundFunction({value: 'cats'})

Exemplo Trabalhado

Digamos que eu crie um componente como este:

const MyComponent = {
  bindings: {
    onSearch: '&'
  },
  controller: controller
};

Esta função (no pai) fica assim:

onSearch(value) {
  // do search
}

No meu modelo pai, agora posso fazer isso:

<my-component on-search="onSearch(value)"></my-component>

A ligação aqui será analisada da string. Você não está realmente passando a função. AngularJS está criando uma função para você que chama a função. A ligação criada no modelo pode conter muitas outras coisas além da chamada de função.

De alguma forma, o AngularJS precisa descobrir de onde obter value e faz isso recebendo um objeto do pai.

No controlador myComponent, preciso fazer algo como:

handleOnSearch(value) {
  if (this.onSearch) {
    this.onSearch({value: value})
  }
}




angularjs-scope