중첩 된 AngularJS 지시문에서 바인딩 사용

격리 범위에서 & 바인딩을 사용하는 컨트롤러의 메서드로 래핑하는 다른 두 개의 지시문을 통해 지시어로 만든 요소에서 ng-change에 바인딩하려고합니다. 인수를 통해 모든 길을 건너 뛸 수있는 방법을 찾아 낼 수 없습니다. 문제를 나타내는 plunk은 다음과 같습니다. 한마디로중첩 된 AngularJS 지시문에서 바인딩 사용

,이 같은 HTML 구조를 가지고 :

<body ng-app="ExampleApp"> 
    <div ng-controller="Controller"> 
    <button ng-click="doSomething('Called directly')">Call Function Directly</button> 
    <br /> 
    <outer on-outer-model-changed="doSomething('Called from Outer in HTML')"></outer> 
    </div> 
</body>

컨트롤러 :

var app = angular.module('ExampleApp', []); 
app.controller('Controller', ['$scope', 
    function($scope) { 
    $scope.doSomething = function(one, two, three) { 
     console.log(arguments); 
    }; 
    } 
]);

outer 지침 :

app.directive('outer', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     outerModelChanged: '&onOuterModelChanged' 
    }, 
    link: function(scope, element, attrs) { 
     var innerElement = angular.element('<inner></inner>'); 
     innerElement.attr('on-inner-model-changed', 'outerModelChanged(\'Called from Outer\')'); 
     element.after(innerElement); 
     $compile(innerElement)(scope); 
     console.log(arguments); 
    } 
    } 
});

그리고 inner 지시어 그 outer 지시문을 만듭니다 :

app.directive('inner', function() { 
    return { 
    scope: { 
     innerModelChanged: '&onInnerModelChanged' 
    }, 
    restrict: 'E', 
    template: '<button ng-click="innerModelChanged(\'Called from Inner\')">Call from Inner</button>' 
    } 
});

나는이가 <outer> 태그에 하드 코딩되어 있기 때문에 출력 ["Called from Outer in HTML"]을 얻고 있음을 이해합니다. 내가 이해하지 못하는 것은 inner 지시문에서 모든 방법을 전달하는 방법입니다.

출처

2014-09-23 GarlicFries

나는 100 % 달성하려는 것을 얻지 못했지만, 이것이 ["Called from Inner"] 메시지를 표시하는 방법입니다.

on-outer-model-changed 표현식이 하드 코드 된 문자열을 사용하지 않도록 html을 변경하십시오.

<body ng-app="ExampleApp"> 
    <div ng-controller="Controller"> 
     <button ng-click="doSomething('Called directly')">Call Function Directly</button> 
     <br /> 
     <outer on-outer-model-changed="doSomething(outerParam)"></outer> 
    </div> 
    </body>

그런 다음 매개 변수를 사용하여 outerModelChanged을 호출하도록 외부 지정 문을 변경하십시오. 그리고 outerParam을 innerParam으로 설정하십시오.

app.directive('outer', function($compile) { 
    return { 
    restrict: 'E', 
    scope: { 
     outerModelChanged: '&onOuterModelChanged' 
    }, 
    link: function(scope, element, attrs, controller) { 
     var innerElement = angular.element('<inner></inner>'); 
     innerElement.attr('on-inner-model-changed', 'outerModelChanged({outerParam:innerParam})'); 
     element.after(innerElement); 
     $compile(innerElement)(scope); 
     console.log(arguments); 
    } 
    } 
});

마지막 메시지에 innerParam 세트 내부 지침에서 innerModelChanged를 호출합니다.

app.directive('inner', function() { 
    return { 
    scope: { 
     innerModelChanged: '&onInnerModelChanged' 
    }, 
    restrict: 'E', 
    template: '<button ng-click="innerModelChanged({innerParam:\'Called from Inner\'})">Call from Inner</button>' 
    } 
});

위의 코드에 대한 설명은 plunk입니다.

출처

2014-09-23 18:13:36 Anton

완벽하게 이해하고 계시는 것 같습니다. 나는 지침에 서비스를 주입하는 것을 끝내 었는데, 그것은 훨씬 더 건전한 접근법처럼 보입니다. 당신이 제안한 변경 사항은 내가하려는 일을 정확하게 수행합니다. – GarlicFries

실제로는 더 나은 접근 방법과 같게 들립니다. – Anton

중첩 된 AngularJS 지시문에서 바인딩 사용

답변

관련 문제