Почему не изменяются данные в родительской директиве?

Question

[bullyy]

<div data-block>
        <div data-block-header>
        </div>
        <div data-block-body>
        </div>
    </div>

angular.module('app').directive('block', [function() {
  return {
    restrict: 'A',
    controller: function($scope, $element) {
      $scope.showBody = false;
      this.toggleBody = function() {
        $scope.showBody = !$scope.showBody;
      }
      $scope.$watch('showBody', function() {
        console.log('changed')
      })
    },
    link: function(scope, element, attrs, ctrl) {}
  }
}]);

angular.module('app').directive('blockHeader', [function() {
  return {
    restrict: 'A',
    require: '^block',
    template: '<div>header</div>',
    controller: function($scope, $element) {},
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function() {
        ctrl.toggleBody();
      })
    }
  }
}]);

angular.module('app').directive('blockBody', ['$http', '$templateRequest', '$compile', function($http, $templateRequest, $compile) {
  return {
    restrict: 'A',
    require:'^block',
    template: '<div ng-show="showBody">Body</div>',
    controller: function($scope, $element) {
    },
    link: function(scope,element,attrs,ctrl){
    }
  }
}]);

По клику по block-header пытаюсь изменить переменную в block, которая влияет на отображение block-body, почему данные не изменяются? Нормальная ли это практика?

Answer 1

[Сергей Протько]

используйте ngClick для таких задач, и почитайте про $digest цикл.

p.s. Раз уж вы только начинаете, почитайте

Comments

[bullyy]

Спасибо за ответ, пока сделал через ngClick и появился вопрос. Если на странице присутствуют несколько подобных блоков, то изменение отражается на всех сразу, как можно их изолировать от других?

[Сергей Протько]

bullyy: читаем про изоляцию скоупов.