Невозможно вызвать директиву связанный метод, если используется изолированная область видимости

Question

Привет Может кто-нибудь, пожалуйста, объясните мне, что мне здесь не хватает?

я создал простой атрибут директивы теста со ссылкой. Без изолированной области я могу вызвать метод в ссылке через ng-click

но как только я добавил изолированную область, это не работает.

 <a test1 class="btn btn-default pull-right" form="PassedIn" ng-click="omg()">
     <span class="glyphicon glyphicon-plus" data-tooltip="New" data-tooltip-placement="left"></span>
 </a>
 <a test2 class="btn btn-default pull-right" view-model="10" ng-click="omg2()">
     <span class="glyphicon glyphicon-plus" data-tooltip="New" data-tooltip-placement="left"></span>
 </a>

Директивы:

.directive('test1', function() {
    return {
      restrict: 'A',
      scope: {
        form: '=form'
      },
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert($scope.form);
        };
      }
    };
  })
  .directive('test2', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.omg2 = function() {
          alert('hello2');
        };
      }
    };
  });

http://plnkr.co/edit/CU96ieef4iNwWmccne4t?p=preview

Я уверен, что это как-то связано с областью применения, но кто-то может объяснить, пожалуйста?

А также, почему моя директива с изолированной областью действия вызывает метод из ссылки Другой директивы (я сделал оба метода одним и тем же именем).

.directive('test1', function() {
    return {
      restrict: 'A',
      scope: {
        form: '=form'
      },
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert($scope.form);
        };
      }
    };
  })
  .directive('test2', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.omg = function() {
          alert('hello2');
        };
      }
    };
  });

http://plnkr.co/edit/IEiDeV9Es6zigGxxk67s?p=preview

Спасибо кевин

Answer 1

Когда вы укажете изолированную область действия, эта директива получит совершенно новую область, которая используется только этой директивой. Аналогично, когда вы не указываете область, родительская область наследуется.

То, как вы написали свой ng-click вы сможете получить доступ только к методам родительской области (omg2 в твоем случае).

Чтобы правильно обработать событие click, нужно сделать что-то вроде этого:

.directive('test1', function () {
    return {
        restrict: 'A',
        compile: function ($element, attr) {
            return function customDirectiveClickHandler(scope, element) {

                // Do standard setup here...

                element.on('click', function (event) {
                    scope.$apply(function(){
                        // All click code goes here...
                        alert('hello2');
                    });
                });
            };
        }
    };
});

Вы также можете увидеть, как на самом деле обрабатывает Angular ng-click (и другие события), глядя на исходный код.