디렉티브 스코프 인수를 사용한 디렉티브 부모 스코프의 콜 함수

디렉티브 스코프 인수를 사용한 디렉티브 부모 스코프의 콜 함수

템플릿에 정의되어 있는 클릭 이벤트(ng-click)에 따라 내용을 표시하거나 숨기는 디렉티브를 개발하고 있습니다.디렉티브가 사용되고 있는 일부 뷰에서는 디렉티브가 현재 그 내용을 표시하고 있는지 숨기고 있는지 알고 싶습니다.DOM 의 변경에 대응할 수 있도록 하고 있습니다.디렉티브는 분리된 범위를 가지고 있으며 디렉티브가 "태깅"되었을 때 부모 스코프에 알리려고 합니다.이를 실현하기 위해 콜백 함수를 디렉티브의 상태가 바뀌었을 때 호출할 수 있는 디렉티브에 전달하려고 합니다(숨기거나 표시).

디렉티브 상태(숨김 또는 표시)가 디렉티브의 격리된 스코프에 저장되고 ng클릭 후에 결정되기 때문에 이를 올바르게 구현하려면 어떻게 해야 할지 모르겠습니다.따라서 뷰가 아닌 디렉티브 내에서 부모 스코프의 함수를 호출해야 합니다.

이것은 예를 들어 WAAAY를 보다 이해하기 쉽게 합니다.다음은 제가 하고 싶은 일을 보여주는 플랭크입니다.

http://plnkr.co/edit/hHwwxjssOKiphTSO1VIS?p=info

var app = angular.module('main-module',[])

app.controller('MainController', function($scope){
  $scope.myValue = 'test value';
  $scope.parentToggle = function(value){
    $scope.myValue = value;
  };
});

app.directive('toggle', function(){
    return {
            restrict: 'A',
            template: '<a ng-click="toggle();">Click Me</a>',
            replace: true,
            scope: {
                OnToggle: '&'
            },
            link: function($scope, elem, attrs, controller) {
                $scope.toggleValue = false;
                $scope.toggle = function () {
                    $scope.toggleValue = !$scope.toggleValue;
                    $scope.OnToggle($scope.toggleValue)
                };
            }
        };
});

앵글은 비교적 처음입니다.이게 나쁜 생각인가요?함수 참조를 전달하는 것이 아니라 서비스 같은 것을 사용해야 합니까?

감사합니다!

갱신하다

를 사용할 수도 있습니다.&루트 스코프의 기능을 바인드하다(실제로 목적이다)&).

그러기 위해서는 디렉티브를 약간 변경해야 합니다.

app.directive('toggle', function(){
  return {
    restrict: 'A',
    template: '<a ng-click="f()">Click Me</a>',
    replace: true,
    scope: {
      toggle: '&'
    },
    controller: function($scope) {
      $scope.toggleValue = false;
      $scope.f = function() {
        $scope.toggleValue = !$scope.toggleValue;
        $scope.toggle({message: $scope.toggleValue});
      };
    }
  };
});

다음과 같이 사용할 수 있습니다.

<div toggle="parentToggle(message)"></div>

플랭크

---

함수를 바인딩할 수 있습니다.=또, 스코프와 태그의 속성명이 일치하고 있는 것을 확인합니다(각선).JS는 Camel Case를 대시 표기로 변환합니다).

이전:

scope: {
  OnToggle: '&'
}

그 후:

scope: {
  onToggle: '='
}

또한 사용하지 마십시오.on-toggle="parentToggle({value: toggleValue})"를 선택합니다.함수를 호출하는 것이 아니라 명령어에 함수의 포인터를 전달하기만 하면 됩니다.

플랭크

언급URL : https://stackoverflow.com/questions/23477859/call-function-on-directive-parent-scope-with-directive-scope-argument