вызов функции пользовательских директив внутри контроллера angularjs

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

итак, у меня есть пример кода пользовательских директив

 angular.module('myApp.directives', []).
            directive('exampleDirective', ['version', function(version) {
             return {
                      link:function(scope,elm,attr) {
                         elm.on('click',function() {
                              alert("clicked element")
                         });
                      }
                    }
            }]);
  

и это html-разметка, которую я сделал

    <example-directive></example-directive>
   <button ng-click="click()">click me</button>
  

как вы можете видеть, кнопка находится за пределами среды example-directive, и, как вы можете видеть, определен ng-click, который запускает функцию click() в контроллер.

мой вопрос в том, как я могу получить alret («щелкнутый элемент») из пользовательской директивы, когда я нажимаю кнопку ng-click в angularjs?

Комментарии:

1. Вы не можете с тем, что у вас есть. У вас есть две разные области.

2. яп изолировал область действия пользовательских директив, если я не ошибаюсь.. так что, нет другого способа с подходом, который я написал выше?

Ответ №1:

Попробуйте это так:

plunker

 app.directive('exampleDirective', function() {
  return {
    restrict: 'E',
    link:function(scope,elm,attr) {
       scope.clicky = function(){console.log('clicked')};
    }
  }
});
  

Поскольку мы не создаем новую область видимости с помощью директивы, как область, указанная в функции связывания директивы, так и область, выведенная ng-click (которая является другой директивой, поставляемой с angular), будет одной и той же областью, в данном случае $rootScope .

Обратите внимание, что вам нужно добавить restrict: 'E' , чтобы директива работала с тем, что вы написали. Значением по умолчанию для этого является атрибут by (E для имени элемента), поэтому он работал бы без него, если бы у вас был <div example-directive />

Комментарии:

1. Я попробовал ваш plunkr, и кнопка находится внутри контейнера директив, если я не ошибаюсь.. ну, есть ли способ с моим подходом выше? потому что мой макет проекта настроен таким образом..