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中，我有以下按钮设计为在ng-click上调用toggleModal（）：

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

我尝试使用这种方法调用toggleModal（）无济于事。我在这里错过了什么吗？

任何帮助都将不胜感激。

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

编辑： @ developer033，我在我的HTML中调用这个指令：

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

Answer 1

不要在ng-click中使用$ scope.Call就像这样

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

Answer 2

使用$scope时，请勿使用ng-click="$scope.toggleModal()

而不是ng-click="toggleModal()试试这个ng-click

此Extending the GuiceApplicationLoader显示onclick，click event listener和timeout方法

希望这有助于：）

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

2 个答案: