2016-09-21 5 views
0

나는이 doc을 통해 갈 것이고, 내가 가지고있는 혼란은 link.apply (this, attrs)에서 'this'이다. 누군가 도울 수 있습니까?각도 데코레이터에서 'this'는 무엇입니까?

$provide.decorator('fooDirective', function($delegate) { 
    var directive = $delegate[0]; 

    directive.scope.fn = "&"; 
    var link = directive.link; 

    directive.compile = function() { 
     return function(scope, element, attrs) { 
     link.apply(this, arguments); 
     element.bind('click', function() { 
      scope.$apply(function() { 
      scope.fn(); 
      }); 
     }); 
     }; 
    }; 

    return $delegate; 
    }); 
}); 

콘솔 디버거를 사용하여 디버깅하려고하면 링크 기능이 실행되는 동안 'this'가 정의되지 않습니다.

+0

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply – Sai

답변

1

앵귤러 데코레이터에는 특별한 this 컨텍스트가 없으므로 느슨한 모드에서는 window이거나 엄격 모드에서는 undefined이 될 수 있습니다. 중첩 함수 this에서

은 각도 지시에 일어날 수있는 비 어휘 상황을 참조 할 수있다 :

directive.compile = function() { 
    // `this` is directive DDO in compile function 
    return function(scope, element, attrs) { 
    // `this` is `undefined` in link function 
    ... 
    }; 
}; 

기능 compile에서 this 지시어 DDO이다. controller 함수에서 this은 컨트롤러 인스턴스입니다. link에는 어휘가 없습니다 this가 있습니다.

link.apply(this, arguments)은 안전하게 재생하려고하지만 여기서는 오해의 소지가 있습니다. 대신 link.apply(null, arguments) 일 수 있습니다.

0

새로운 링크 기능을 반환하는 컴파일 함수를 만들어야합니다.
내부에는 이전 링크 함수에서 apply (첫 번째 매개 변수로 함수 자체 전달)를 호출하여 이전 기능을 가져옵니다.
이 집합을 사용하면 추가 동작을 추가하기 만하면됩니다 (이 경우 클릭 이벤트는 클릭시 새 함수를 호출하는 요소에 바인딩합니다).