如何在ng-click的指令中调用控制器内部的函数

Question

我有以下指令，用于在单击按钮时调用模式对话框：

.directive('myModal', function () {                         
        return {
            restrict: 'E',
            scope: { show : '='},
            replace:true,                                                   
            transclude: true,                                               
            controller: function($scope, $filter,spService, spHelper, itemContainer) {
                $scope.toggleModal = function() {
                    $scope.convertArray();
                    $scope.modalShown = !$scope.modalShown;
                    $scope.currentQuestionIndex = 0;                                // initialize question index
                    $scope.answerCollection = [];                                   // initialize collection
                    $scope.answerCollection .value = null;
                    $scope.choicesSelected = "";                                    //  initialize for validation
                    $scope.currentQuestionObject = $scope.wizardQuestionSet[0];             //  start from question #1
                };
            // lots more functions here...
       },
       link: function(scope, element, attrs) {
                scope.dialogStyle = {};
                if (attrs.width) {
                    scope.dialogStyle.width = "640px";
                }
                if (attrs.height) {
                    scope.dialogStyle.height = "660px";
                } 
                scope.hideModal = function () { 
                    scope.show = false;
                };
            },
            template:'<div class="ng-modal" ng-show='show'>' + 
                           '<div class="ngdialog-overlay" ng-click='hideModal()'></div>' +
                          '<div class="ng-modal-dialog" ng-style='dialogStyle'>' + 
                             '<div class="ng-modal-close" ng-click='hideModal()'>X</div>' +
                             '<div class="ng-modal-dialog-content" ng-transclude></div>' + 
                        '</div>' + 
                     '</div>' 
        };

在我的HTML中，我有以下按钮，用于在点击时调用toggleModal（）：

<div class="expandStory" style="float:left;padding-right:10px;">
    <span ng-click="$scope.toggleModal()" class="carousel-btns">
          Call my Modal
   </span>
</div>

我尝试过使用这种方法调用toggleModal（），但没有成功。我是不是遗漏了什么？

如有任何帮助，我们将不胜感激。

一如既往地感谢您的提示。：）

EDIT:@developer033，我在HTML中调用指令，如下所示：

<my-modal show="carousel.modalShown" width="750px" height="auto">
    <!-- do something -->
</my-modal>

Answer 1

不要在ng-click中使用$scope。就像这个一样

<div class="expandStory" style="float:left;padding-right:10px;">
    <span ng-click="toggleModal()" class="carousel-btns">
          Call my Modal
   </span>
</div>

Answer 2

使用ng-click时，不要使用$scope

代替ng-click="$scope.toggleModal()试试这个ng-click="toggleModal()

这把小提琴展示了ng-click、onclick和click event listener的方法

希望这有帮助：）