Угловая директива изолирует область: функция области не будет выполняться

У меня возникают проблемы с пониманием того, как определить функции, которые будут использоваться (или внутри) директивой, которая имеет изолированную область видимости. В следующем коде почему $scope.foo() функцию выполнить? Есть ли правильный способ, которым я должен подходить к этой проблеме? Я пытаюсь создать кнопку, которая будет видима, только если пользователь вошел в систему и подумал, что директива будет хорошим способом инкапсулировать / изолировать эту функциональность.

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.2/angular.js"></script>
  <script>
    angular.module('MyApp', [])
      .directive('myScopedDirective', function() {
        return {
          scope: {}, // <!-- isolate scope breaks things
          controller: function($scope) {
            // isolate scope prevents this function from being executed
            $scope.foo = function() {
              alert('myScopedDirective / foo()');
            };
          }
        };
      });
  </script>
</head>

<body>
  <div ng-app="MyApp">
    <!-- button doesn't work unless isolate scope is removed -->
    <button my-scoped-directive ng-click="foo()">directive container - foo()</button>
  </div>
</body>

</html>

Плункер: http://plnkr.co/edit/Sm81SzfdlTrziTismOg6

Источник

1 ответ

Решение

Это не работает, потому что вы используете 2 директивы в разных областях, ngClick а также myScopedDirective, Вам нужно создать шаблон для вашей директивы и вызвать функцию click следующим образом:

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.2/angular.js"></script>
  <script>
    angular.module('MyApp', [])
      .directive('myScopedDirective', function() {
        return {
          restrict: 'AE', // Can be defined as element or attribute
          scope: {},
          // Call the click function from your directive template
          template: '<button ng-click="foo()">directive container - foo()</button>',
          controller: function($scope) {
            $scope.foo = function() {
              alert('myDirective / foo()');
            };
          }
        };
      });
  </script>
</head>

<body>
  <div ng-app="MyApp">
    <my-scoped-directive></my-scoped-directive>
  </div>
</body>

</html>

Рабочий плункер

Источник
Другие вопросы по тегам