Блог

С помощью Angularjs вы можете привязать событие к элементу dom следующим образом:

 <div ng-controller="SampleController">
    <a ng-click="showTheHiddenDiv()">Show the hidden div</a>

    <div ng-show="showHiddenDiv">
        hidden content
    </div>
</div>
  

Мой вопрос: возможно ли прикрепить подобную функцию обработчика событий извне контроллера, например, так?

 <a ng-click="showTheHiddenDiv()">Show the hidden div</a>

<div ng-controller="SampleController">
    <div ng-show="showHiddenDiv">
        hidden content
    </div>
</div>
  

Это не работает, мне интересно, есть ли специальный способ доступа к showTheHiddenDiv() функции. Я знаю, что мог бы просто обернуть все в другой контейнер и сделать это областью действия контроллера, но мне интересно, возможно ли это сделать таким образом.

Спасибо!

Подумайте о привязках. Вы хотите ввести переменную в область, к которой может привязываться представление (ng-click и внутренний div). Было бы разумно сделать эту переменную логической, чтобы при ее изменении она обновляла представления.

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

 <div ng-controller="SampleController">
    <a href="#" ng-click="showDiv = !showDiv">Show the hidden div</a>

    <div ng-show="showDiv">
        hidden content
    </div>
</div>
  

При нажатии на ссылку будет переключаться ‘showDiv’, который сохраняется в области SampleController. Поскольку директива ng-show для внутреннего div привязана к ‘showDiv’ (тому же showDiv, который находится в области SampleController), он будет автоматически отображаться и скрываться на основе значения ‘showDiv’.

[ПРАВИТЬ]

Мне не удалось ответить на первоначальный вопрос, поэтому я попробую еще раз.

Конечно, можно определить переменную области, которая находится за пределами SampleController, и привязать ее к представлению внутри внутреннего контроллера:

 <a href="#" ng-click="showDiv = !showDiv">Show the hidden div</a>

<div ng-controller="SampleController">

    <div ng-show="showDiv">
        hidden content
    </div>
</div>
  

Это работает из-за наследования области действия. Когда у вас есть наследование области, дочерняя область наследует переменные области из родительской области. В приведенном выше примере у вас есть область SampleController (дочерняя область), которая наследуется от области внешнего контроллера (родительской области). Если родительского контроллера нет, то родительской областью является только корневая область. Важным моментом является то, что дочерняя область наследуется от родительской области и наследует все ее переменные области.

В приведенном выше примере ng-show привязан к showDiv , но на самом деле он не был назначен переменной области видимости ни в одной области (пока). Итак, изначально ‘showDiv’ не определено, но оно остается скрытым, потому что в angular значение undefined обрабатывается как false при вычислении. Как только вы нажмете на ссылку, будет назначен showDiv !showDiv. Именно в этот момент создается переменная области ‘showDiv’, и поскольку назначение происходит за пределами SampleController, переменная области создается в родительской области — в данном случае в корневой области.

Поскольку showDiv привязан к одной и той же переменной области видимости как в привязке, так и в директиве ng-show, любые изменения переменной области видимости ‘showDiv’ (например, щелчок по ссылке) будут распространяться на все связанные с ней представления (div, который содержит скрытое содержимое).

Вы всегда можете использовать сервис и директиву для совместного использования значения между различными областями.

  app.service('SharedService', function(){
   this.showHiddenDiv = false;
 });

app.directive('showDiv', function(SharedService){

  return {
    restrict: 'AC',
    link : function(scope, element, attr) {
       scope.showHiddenDiv = SharedService.showHiddenDiv;
       scope.toggleDiv = function(){
         SharedService.showHiddenDiv = SharedService.showHiddenDiv ? false : true;
       }
    }
  }
})
  

HTML:

 <a ng-click="toggleDiv()" show-div>Show the hidden div</a>

<div ng-controller="SampleController">
    <div ng-show="showHiddenDiv" show-div>
        hidden content
    </div>
</div>
  

В качестве примечания, каждый раз, когда вы пытаетесь манипулировать DOM, вы должны делать это в директиве, это угловой способ!