angularjs нг щелкни обработка дочерних директив

Question

У меня есть «рынок» директива:

angular 
.module('myModule') 
.directive('market', [function() { 
    return { 
     restrict: 'EA', 
     template: '<div outcome="outcome" ng-click="onOutcomeClick()" ng-repeat="outcome in market.Outcomes">{{outcome.Odd}}</div>', 
     controller: ['$scope', function ($scope) { 
      $scope.market = { 
       Outcomes: [ 
        { Odd: 1 }, 
        { Odd: 2 }, 
        { Odd: 3 }, 
        { Odd: 4 }, 
        { Odd: 5 }, 
       ] 
      }; 
     }], 
     link: function (scope, elem, attrs) { 
     } 
    } 
}]); 

, который содержит много «результата» директив:

angular 
.module('myModule') 
.directive('outcome', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      outcome: '=' 
     }, 
     controller: ['$scope', function ($scope) { 
      $scope.onOutcomeClick = function() { 
       console.log($scope.outcome.Odd); 
      }; 
     }], 
     link: function (scope, elem, attrs) { 
     } 
    } 
}]); 

Когда я нажимаю на «исход», это кажется это угловатое выражение «onOutcomeClick» в «рыночной» директиве, но не в директиве «результат». Как заставить Угловой называть «onOutcomeClick» от «исхода» директив (объема в директиве «итоговой» должно быть выделен)

jsfiddle пример: http://jsfiddle.net/dgjcf41d/5/ Я ожидаю увидеть предупреждение в примере, но не

Answer 1

Ответ Вы не должны объявлять ng-click директиву внутри market директивы, вы можете добавить обработчик событий щелчка себя внутри outcome директивы.

FORKED DEMO

Javascript

директива рынка

// remove the `ng-click` directive 
.directive('market', [function() { 
    return { 
    // .... 
    template: '<div outcome="outcome" ng-repeat="outcome in market.Outcomes">{{outcome.Odd}}'</div> 
    // ... 
    }; 
}); 

директива Результат

.directive('outcome', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      outcome: '=' 
     }, 
     link: function (scope, elem, attrs) { 
      elem.on('click', function() { 
       alert('outcome clicked: ' + scope.outcome.Odd); 
      }); 
     } 
    } 
}]); 

Answer 2

You 've определил ngClick в директиве market. Каждая директива outcome имеет изолированный объем (который является ребенком области market). поэтому ngClick ищет onOutcomeClick в области market.

Определите шаблон для директивы outcome и поместите там ngClick.

A working forked demo:

angular.module('myModule', []) 
    .controller('myController', [function() { }]) 
    .directive('market', [function() { 
     return { 
      restrict: 'EA', 
      template: '<div outcome="outcome" ng-repeat="outcome in market.Outcomes"><outcome outcome=outcome>{{outcome.Odd}}</outcome></div>', 
      controller: ['$scope', function ($scope) { 
       $scope.market = { 
        Outcomes: [ 
         { Odd: 1 }, 
         { Odd: 2 }, 
         { Odd: 3 }, 
         { Odd: 4 }, 
         { Odd: 5 }, 
        ] 
       }; 
      }] 
     } 
    }]) 
    .directive('outcome', [function() { 
     return { 
      restrict: 'E', 
      template: '<div ng-click="onOutcomeClick()" ng-transclude></div>', 
      transclude: true, 
      scope: { 
       outcome: '=' 
      }, 
      controller: ['$scope', function ($scope) { 
       $scope.onOutcomeClick = function() { 
        alert('outcome clicked: ' + $scope.outcome.Odd); 
       }; 
      }] 
     } 
    }]);