0

두 개의 지시문이 있습니다. parent 지시문은 단순히 자식을 감싸 줘야합니다. 이 목적을 위해 중계가 사용됩니다. 그러나 ng-click과 같은 다른 지시문은 그 속성이 작동하지 않기 때문에 child 지시문 요소에 바인딩됩니다 (컴파일되지 않았습니까?). 여기 transcluded 지시문 콘텐츠의 각도 클릭 기능이 트리거되지 않습니다.

은 JS입니다 :

(function(angular) { 
    'use strict'; 
angular.module('docsIsoFnBindExample', []) 
    .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) { 
    $scope.name = 'Tobias'; 
    $scope.message = ''; 
    $scope.hideDialog = function(message) { 
     $scope.message = message; 
     $scope.dialogIsHidden = true; 
     $timeout(function() { 
     $scope.message = ''; 
     $scope.dialogIsHidden = false; 
     }, 2000); 
    }; 
    }]) //controller is not important now 

    .directive('myDialog', function() { //parent directive 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { 
     'close': '&onClose' 
     }, 
     template: '<div class="alert"><a href class="close" ng-click="close({message: \'closing for now\'})">&times;</a><div ng-transclude></div></div>' 
    }; 
    }) 

    .directive('daka', function() { //child directive 
    return { 
     restrict: 'E', 
     scope: { 
     'input': '@' 
     }, 
     link: function(scope, element, attributes) { 
     scope.func= function() { 
      console.log("blablabla"); //no console output after click event 
     }; 
     } 
    }; 
    }); 
})(window.angular); 

HTML :

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-directive-transclusion-scope-production</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body ng-app="docsIsoFnBindExample"> 
    <div ng-controller="Controller"> 
    {{message}} 
    <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)"> 
    <daka ng-click="func()" input="11">BLABlABLA</daka> 
    </my-dialog> 
</div> 
</body> 
</html> 

답변

0

당신의 부모 지시어에 클릭 NG 찾기 위해 노력하고있다. 자녀 지시문에 click 이벤트를 추가 할 수 있습니다.

.directive('daka', function() { //child directive 
return { 
    restrict: 'E', 
    scope: { 
    'input': '@' 
    }, 
    link: function(scope, element, attributes) { 
    element.on('click', function() { 
      alert('outcome clicked: '); 
     }); 
    } 
}; }); 

작업 jsfiddle 링크 - https://jsfiddle.net/p2vht8sb/