Angular에서

Question

사용자 지정 지시문을 만들고 jQuery와 독립적으로 만들려고합니다. 이를 jQuery없이 수행하려면 Scopes (부모 및 자식)가 직접 상호 작용해야 할 수 있습니다. 가능한 한 많은 "나쁜 습관"을 피하고자합니다. 제 질문은 다음과 같습니다.

상위 범위의 함수를 하위 범위로 직접 호출하는 것은 나쁜 습관입니까? 그렇다면 스코프를 제어하는 ​​컨트롤러 나 요소를 얻는 방법이 있습니까?

이렇게해야하는 이유는 지시어에 여러 중첩 스코프가있을 수 있기 때문입니다. 그리고 반드시 현재 범위의 직계 부모가 아닌 매우 특정한 하나에 액세스해야합니다 (조상이지만).

편집 : 유스 케이스 정교화

이 모듈은 두 개의 지침이 포함되어 있습니다. 둘 중 하나는 여러 개의 상위 디렉티브에 중첩 될 수 있습니다. 이 자식 지시문은 그에 따라 부모 지시문을 필요로하지만 중첩 부모의 경우 가장 가까운 부모의 제어기 만 가져옵니다.

이의 정상적인 사용은 일반적으로 될 것입니다 :

<element parent-attr-dir="val"> 
    <element child-attr-dir="val"></element> 
</element> 

공지 사항 속성의 값과 일치해야합니다. 이것은 어떤 "조상"을 붙일지를 결정합니다.

<element parent-attr-dir="value1"> 
    <element parent-attr-dir="value2"> 
     <element child-attr-dir="value1">Will run on top most ancestor</element> 
     <element child-attr-dir="value2">Will run on immediate parent</element> 
    </element> 
    <element parent-attr-dir="value3"> 
     <element child-attr-dir="value3">Will run on immediate parent</element> 
     <element child-attr-dir="value1">Will run on top most ancestor</element> 
    </element> 
    <element child-attr-dir="val">Will not run!!</element> 
</element> 

편집 : 질문

이 작품의 솔루션,하지만 나쁜 경우 알 필요가

고급 사용법과 유사 할 수 있습니다.

var _p = scope; 
while (_p !== null) { 
    if (_p.doSomething 
    && /* some other criteria. */) { 
     _p.doSomething(scope); 
    } 
    _p = _p.$parent; 
} 

편집 : 솔루션

jQuery를 사용이 작동하지만, jQLite 부모 (선택)를 가지고 있지 않기 때문에 jQuery를 요구, 단지 부모().

$(element).parents('[attrname=value]').controller('moduleName').funcName() 

Answer 1

한 가지 해결책은 자녀가 부모 명령을 요구하고 부모가 선택적으로 부모 명령을 요구하는 것입니다. 그런 다음 자식은 부모 값의 부모 컨트롤러의 메서드를 호출하여 조건 값을 전달합니다. 상위 컨트롤러가 기준을 충족하지 못하면 상위 컨트롤러 (있는 경우)에게 통화를 전달하거나 아무 일도 발생하지 않습니다. 솔루션의 스케치 :

app.directive("parentAttrDir", function() { 
    return { 
     require: ["?^parentAttrDir","parentAttrDir"], 
     link: function(scope,elem,attrs,controllers) { 
      var parentAttrDir = controllers[0], 
       thisController = controllers[1], 
       criterion = attrs.parentAttrDir; 
      thisController.parent = parentAttrDir; 
      thisController.criterion = criterion; 
     }, 
     controller: function($scope) { 
      this.doSomething = function(data,criterion) { 
       if(this.criterion === criterion) { 
        // actually do something with the data 
       } 
       else if(this.parent != null) { 
        return this.parent.doSomething(data,criterion); 
       } 
      }; 
     } 
    }; 
}); 

app.directive("childAttrDir", function() { 
    return { 
     require: "^parentAttrDir", 
     link: function(scope,elem,attrs,parentAttrDir) { 
      var criterion = attrs.childAttrDir; 
      // EXAMPLE USAGE FROM CHILD 
      scope.doSomeAction = function(data) { 
       parentAttrDir.doSomething(data,criterion); 
      }; 
     } 
    }; 
});