AngularJS Directive 요소 메서드 바인딩 - TypeError: 'in' 연산자를 사용하여 1에서 'functionName'을 검색할 수 없습니다.

AngularJS Directive 요소 메서드 바인딩 - TypeError: 'in' 연산자를 사용하여 1에서 'functionName'을 검색할 수 없습니다.

이것은 메인 템플릿의 컨트롤러입니다.

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

지시사항은 다음과 같습니다.

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

메인 템플릿에는 다음과 같이 디렉티브가 적용됩니다.

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

이 메서드는 디렉티브템플릿(directive-template)에서 호출됩니다.

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

질문: [EDIT]를 클릭하면 콘솔에 다음 오류가 나타납니다.

TypeError: 'in' 연산자를 사용하여 1에서 'editWebsite'를 검색할 수 없습니다.

여기서 무슨 일이 일어나고 있는지 아는 사람?

식 바인딩을 정의했으므로(&)를 포함하는 오브젝트 리터럴 파라미터를 사용하여 명시적으로 호출해야 합니다.idHTML 로 바인드 하는 경우는, 다음과 같이 합니다.edit-website="editWebsite(id)".

앵글은 이게 뭔지 알아야 해id는 HTML 에 포함되어 있습니다.또, 이 HTML 는 스코프의 일부가 아니기 때문에, 다음의 조작을 실시해 콜에 「로컬」이라고 불리는 것을 추가할 필요가 있습니다.

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

또는 다른 방법으로 다음과 같은 것을 들 수 있습니다.

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

컨트롤러/링크 코드 사용 시:

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

---

AngularJS는 설명서에 이에 대한 설명이 포함되어 있습니다.다음의 예를 참조해 주세요."close({message: 'closing for now'})"다음 URL에 있습니다.

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

TL;DR; - 바인딩된 함수가 React에서와 같이 하위 구성요소로 전달된다고 가정합니다.틀렸습니다.사실 Angular는JS는 문자열 템플릿을 해석하고 새로운 함수를 만들고 있습니다.이 함수는 부모 함수를 호출합니다.

생성된 이 함수는 일반 변수가 아닌 키와 값을 가진 개체를 수신할 것으로 예상합니다.

자세한 설명

이 문제는 '&'를 사용하여 함수를 바인드하고 컨트롤러에서 함수를 호출하려고 했을 때 발생합니다.이 함수는 플레인 변수의 이름을 포함하는 객체가 아니라 플레인 변수를 전달합니다.오브젝트 키는 템플릿엔진이 값을 바운드 함수에 전달하는 방법을 알아내기 위해 필요합니다.

예를 들어, 당신이 전화했다.boundFunction('cats')보다는boundFunction({value: 'cats'})

작업 예

예를 들어 다음과 같은 컴포넌트를 만듭니다.

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

(부모의) 이 함수는 다음과 같습니다.

onSearch(value) {
  // do search
}

부모 템플릿에서는 다음 작업을 수행할 수 있습니다.

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

여기서의 바인딩은 문자열에서 구문 분석됩니다.당신은 실제로 그 함수를 통과하지 못하고 있어요. 각진JS가 함수를 호출하는 함수를 만들고 있습니다. 템플릿에서 작성된 바인딩에는 함수 호출 이외의 많은 것이 포함될 수 있습니다.

Angular JS는 든 Angular JS를 얻을 수 있는 합니다.value부모로부터 오브젝트를 수신함으로써 이 처리를 수행합니다.

myComponent 컨트롤러에서 다음과 같은 작업을 수행해야 합니다.

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

언급URL : https://stackoverflow.com/questions/30244358/angularjs-directive-element-method-binding-typeerror-cannot-use-in-operator