0

У меня есть две директивы, родительская директива должна просто обернуть вокруг своего дочернего элемента. Для этой цели используется переход. Однако, любая другая директива, такая как ng-click, привязана к элементу директивы child как его атрибут, не работает (не компилируется?).Функция Angular-ng-click для передаваемого содержимого директивы не запускается

Вот 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

Он пытается выглядеть нг кнопкой мыши в вашей родительской директивы. Таким образом, вы можете добавить событие 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/

 Смежные вопросы

  • Нет связанных вопросов^_^