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

У меня возникли проблемы с пониманием того, как определять функции, которые будут использоваться (или внутри) директивой с областью выделения. В следующем коде, почему функция $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>

Plunker: http://plnkr.co/edit/Sm81SzfdlTrziTismOg6

источник

2015-07-08 YellowShark

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

<!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>

Работа plunker

источник

2015-07-08 23:52:09 user2718281

Спасибо! Это имеет смысл, я не считаю, что ng-click является директивой и, следовательно, имеет свою собственную область действия, которая полностью отделена от созданной моей директивой - это довольно разумно. Я также проверил, что работает другой подход: привязка к элементу $ в контроллере и добавление клика-листера, а не использование ng-click вообще, например: http://plnkr.co/edit/vC1OUzlZr3a7YVLfpD6Q. Хорошо, спасибо очень много! – YellowShark

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

ответ

Смежные вопросы