Angular에서 분리된 스코프가 없는 명령에서 컨트롤러 함수를 호출합니다.JS

Angular에서 분리된 스코프가 없는 명령에서 컨트롤러 함수를 호출합니다.JS

분리된 스코프를 사용하지 않고 명령어 내에서 부모 스코프의 함수를 호출할 수 있는 방법을 찾을 수 없습니다.독립 스코프를 사용하면 독립 스코프에서 "&"를 사용하여 상위 스코프의 함수에 액세스할 수 있지만 필요하지 않은 경우 독립 스코프를 사용하면 결과가 초래됩니다.다음 HTML을 고려하십시오.

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

이 간단한 예에서는 JavaScript 확인 대화 상자를 표시하고 확인 대화 상자에서 "OK"를 클릭했을 경우에만 doIt()를 호출합니다.이것은 격리된 스코프를 사용하면 간단합니다.지시문은 다음과 같습니다.

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

단, 문제는 격리된 스코프를 사용하고 있기 때문에 위의 예에서 ng-hide는 부모 스코프에 대해 실행되는 것이 아니라 격리된 스코프에서 실행됩니다(모든 디렉티브에서 격리된 스코프를 사용하면 해당 요소의 모든 디렉티브가 격리된 스코프를 사용하기 때문입니다).위 예의 jsFiddle은 ng-hide가 작동하지 않습니다.(이 바이올린에서는 입력란에 yes를 입력하면 버튼이 숨겨집니다.)

다른 대안은 격리된 범위를 사용하지 않는 것입니다. 이 지시의 범위를 분리할 필요가 없기 때문에 실제로 여기서 원하는 것은 이것입니다.유일한 문제는 격리된 범위에서 전달하지 않을 경우 부모 범위에서 메서드를 어떻게 호출할 수 있는가 하는 것입니다.

격리된 스코프를 사용하지 않고 ng-hide는 정상적으로 동작하고 있습니다만, 물론 confirmAction() 호출은 동작하지 않고, 어떻게 동작시키는지 모르겠습니다.

제가 정말로 찾고 있는 답은 분리된 스코프를 사용하지 않고 외부 스코프에서 함수를 호출하는 방법입니다.이 확인 대화 상자가 다른 방법으로 작동하도록 하는 것에는 관심이 없습니다.왜냐하면 이 질문의 요점은 외부 스코프에 콜을 발신하고 다른 디렉티브를 부모 스코프에 대해 동작시킬 수 있는 방법을 파악하는 것이기 때문입니다.

또는 다른 지시사항이 여전히 상위 범위와 반대되는 경우 격리 범위를 사용하는 솔루션에 대해 듣고 싶지만, 불가능하다고 생각합니다.

디렉티브는 함수만 호출하기 때문에(속성에 값을 설정하려고 하지 않기 때문에) $parse 대신 $eval을 사용할 수 있습니다(분리되지 않은 범위).

scope.$apply(function() {
    scope.$eval(attrs.confirmAction);
});

또는 단순히 $apply를 사용하면 스코프에 대한 인수를 $eval()업데이트할 수 있습니다.

scope.$apply(attrs.confirmAction);

만지작거리다

Angular의 $parse 서비스를 이용하려고 합니다.JS.

예를 들어 다음과 같습니다.

.directive('confirm', function ($parse) {
    return {
        restrict: 'A',

        // Child scope, not isolated
        scope : true,
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(attrs.confirm)) {
                    scope.$apply(function(){

                        // $parse returns a getter function to be 
                        // executed against an object
                        var fn = $parse(attrs.confirmAction);

                        // In our case, we want to execute the statement in 
                        // confirmAction i.e. 'doIt()' against the scope 
                        // which this directive is bound to, because the 
                        // scope is a child scope, not an isolated scope. 
                        // The prototypical inheritance of scopes will mean 
                        // that it will eventually find a 'doIt' function 
                        // bound against a parent's scope.
                        fn(scope, {$event : e});
                    });
                }
            });
        }
    };
});

$parse를 사용하여 부동산을 설정하는 것도 좋지만, 나중에 알게 되면 다리를 건너게 해주지.

으로 전화하다hideButton모모스스스스스스

바이올린을 소개합니다.http://jsfiddle.net/pXej2/5/

다음은 업데이트된 HTML입니다.

<div ng-app="myModule" ng-controller="myController">
    <input ng-model="showIt"></input>
    <button ng-hide="$parent.hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>
</div>

유일한 문제는 격리된 범위에서 전달하지 않을 경우 부모 범위에서 메서드를 어떻게 호출할 수 있는가 하는 것입니다.

여기 jsfiddle이 있습니다.분리된 스코프를 사용하지 않고 ng-hide는 정상적으로 동작하지만, 물론 confirmAction() 호출은 동작하지 않기 때문에 어떻게 동작해야 할지 모르겠습니다.

먼저 작은 점:이 경우 외부 컨트롤러의 범위는 명령어 범위의 상위 범위가 아니라 외부 컨트롤러의 범위가 명령어 범위입니다.즉, 명령어로 사용되는 변수 이름은 컨트롤러 범위에서 직접 검색됩니다.

다음, 쓰다, 쓰다, 쓰다, 쓰다.attrs.confirmAction()하지 않는 것은, 「」가 있기 때문입니다.attrs.confirmAction버튼의 ,

<button ... confirm-action="doIt()">Do It</button>

입니다."doIt()"수 문자열은 호출할 수 없습니다."doIt()"().

당신의 질문은 다음과 같습니다.

함수의 이름을 문자열로 지정했을 때 함수를 어떻게 부르나요?

JavaScript에서는 주로 다음과 같은 점 표기법을 사용하여 함수를 호출합니다.

some_obj.greet()

그러나 배열 표기법을 사용할 수도 있습니다.

some_obj['greet']

인덱스 값이 문자열인 점에 유의하십시오.따라서 지시사항에서는 다음과 같이 간단히 수행할 수 있습니다.

  link: function (scope, element, attrs) {

    element.bind('click', function (e) {

      if (confirm(attrs.confirm)) {
        var func_str = attrs.confirmAction;
        var func_name = func_str.substring(0, func_str.indexOf('(')); // Or func_str.match(/[^(]+/)[0];
        func_name = func_name.trim();

        console.log(func_name); // => doIt
        scope[func_name]();
      }
    });
  }

언급URL : https://stackoverflow.com/questions/17583004/call-a-controller-function-from-a-directive-without-isolated-scope-in-angularjs