Question

我有两个指令，父指令应该简单地包裹它的子节点。转换用于此目的。但是，然后任何其他指令（例如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>

Answer 1

它试图在你的父指令中查看ng-click。因此，您可以为子指令添加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/

不会触发转换指令内容上的Angular-ng-click功能

1 个答案: