子要素のみをクリックする

Question

私はdivの親にいくつかのものを制限するための指示をしましたが（私が例に書いていない制限など）、2番目の要素をクリックすると聞きたい2番目の要素でのみ、クリックするとどのように聞くことができますか？

注：私は、次のようにディレクティブにdivの父に

angular 
 
    .module('MyApp', []) 
 
    .directive(
 
    'clickMe', 
 
    function() { 
 
     return { 
 
     link: function(scope, element) { 
 
      element.on('click', function() { 
 
      console.log('click'); 
 
      }); 
 
     }, 
 
     }; 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp"> 
 
    <div click-me> 
 
    clickeame 
 
    <div id="one"> 
 
     click 2 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

変更あなたのディレクティブを挿入する

angular 
    .module('MyApp', []) 
    .directive(
    'clickMe', 
    function() { 
     return { 
     link: function(scope, element) { 
      element.on('click', function(event) { 
      if (event.target.id == "one") { 
       console.log('click'); 
      } 
      }); 
     }, 
     }; 
    } 
); 

DEMOをしたい

angular 
 
    .module('DemoApp', []) 
 
    .directive(
 
    'clickMe', 
 
    function() { 
 
     return { 
 
     link: function(scope, element) { 
 
      element.on('click', function(event) { 
 
      if (event.target.id == "one") { 
 
       console.log('click'); 
 
      } 
 
      }); 
 
     }, 
 
     }; 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="DemoApp"> 
 
    <div click-me> 
 
    clickeame 
 
    <div id="one"> 
 
     click 2 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

これは一人っ子 https://codepen.io/anon/pen/eGzBQm

angular 
    .module('MyApp', []) 
    .directive(
    'clickMe', 
    function() { 
     return { 
     link: function(scope, element) { 
      element.find("div").on('click', function(event) { 
       console.log('click'); 

      }); 
     }, 
     }; 
    } 
);