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

Question 1

다음은 기본 템플릿의 컨트롤러입니다.

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>

그리고 이것은 지시어 템플릿 (website-overview.html)에서 호출되는 메소드입니다.

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

질문 : 편집을 클릭하면 다음 오류가 콘솔에 나타납니다.

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

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

Question 2

표현식 바인딩 ( &) 을 정의 했으므로 idHTML에서 .txt로 바인딩하려는 경우 포함하는 객체 리터럴 매개 변수를 사용하여 명시 적으로 호출해야합니다 edit-website="editWebsite(id)".

실제로 Angular는 이것이 id여러분의 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

Question 3

TL; DR; -바인딩 된 함수가 자식 구성 요소에 전달되고 있다고 가정합니다. 이것은 올바르지 않습니다. 실제로 AngularJS는 문자열 템플릿을 구문 분석하고 새 함수를 생성 한 다음 부모 함수를 호출합니다.

이 함수는 일반 변수가 아닌 키와 값이있는 객체를 받아야합니다.

더 긴 설명

이것은 '&'를 사용하여 함수를 바인딩하고 컨트롤러에서 해당 함수를 호출하여 일반 변수의 이름을 포함하는 개체가 아닌 일반 변수를 전달하려고 할 때 발생합니다. 객체 키는 바운드 함수에 값을 전달하는 방법을 알아 내기 위해 템플릿 엔진에 필요합니다.

예. 당신은 불렀다 boundFunction('cats')보다는boundFunction({value: 'cats'})

작동 예

다음과 같은 구성 요소를 생성한다고 가정합니다.

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

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

onSearch(value) {
  // do search
}

이제 부모 템플릿에서 다음을 수행 할 수 있습니다.

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

여기의 바인딩은 문자열에서 구문 분석됩니다. 실제로 함수를 전달하지 않습니다. AngularJS는 함수를 호출하는 함수를 만들고 있습니다. 템플릿에서 생성 된 바인딩은 함수 호출 외에 많은 것을 포함 할 수 있습니다.

AngularJS는 어떻게 든 얻을 수있는 곳을 알아 내야하며 value, 부모로부터 객체를 받아이를 수행합니다.

myComponent 컨트롤러에서 다음과 같이해야합니다.

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