Область действия директивы для контроллера

Question

Я создал директиву, чтобы я мог закрыть bootstrap-modal с функцией внутри контроллера на событии успеха. То, что я пытался это

//Directive 
.directive('modalBox', function() { 
    return { 
     restrict: 'C', 
     link: function(scope, element) { 
      console.log(element); 
      scope.dismiss  = function() { 
       element.modal('hide'); 
      }; 
      scope.dismissModal = function(inputClass) { 
       $('.' + inputClass).modal('hide'); 
      }; 
     } 
    }; 
}); 

HTML, как

<div id="myModal" data-backdrop="static" class="modal fade modalBox myModal" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-dialog modal-xlg"> 
    <div class="modal-content"> 
     <div class="modal-header modal-header-danger"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="margin-none" ng-if="!operation">Add Fuel Entry</h4> 
      <h4 class="margin-none" ng-if="operation">Update Fuel Entry</h4> 
     </div> 
     <div class="modal-body">My Form Data 
</div> 
    </div> 
</div> 

и в контроллере я реализую это нравится -

$scope.closeModal = function() { 
     $scope.dismissModal('myModal'); 
}; 

Его дает мне ошибку неопределенными. Где я поступаю неправильно.

Answer 1

Если вы создаете директиву, вы должны привязать этот метод closeModal внутри директивы. Поскольку вы используете модальную форму бутстрапа, вы также должны рассмотреть возможность использования компонента угловой бутстрапа.

Для этой конкретной ситуации, может быть, вы могли бы удалить эту директиву и взаимодействовать с модальный непосредственно на контроллере:

HTML:

<div id="myModal" data-backdrop="static" class="modal fade modalBox myModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-xlg"> 
     <div class="modal-content"> 
      <div class="modal-header modal-header-danger"> 
      <button type="button" class="close" ng-click="closeModal('myModal') aria-hidden="true">×</button> 
      <h4 class="margin-none" ng-if="!operation">Add Fuel Entry</h4> 
      <h4 class="margin-none" ng-if="operation">Update Fuel Entry</h4> 
     </div> 
     <div class="modal-body">My Form Data 
     </div> 
    </div> 
</div> 

и на контроллере:

$scope.closeModal = function(modalId) { 
    $("#" + modalId).modal('hide'); 
};