2016-08-03 4 views
1

Ich habe die folgende Direktive entwickelt, um eine modale Dialog auf die Schaltfläche klicken aufzurufen:Wie in einem Controller in einer Richtlinie über eine Funktion aufzurufen ng Sie auf

.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>' 
     }; 

Und in meinem HTML, ich habe die folgenden Knopf entworfen toggleModal() auf aufzurufen ng Sie auf:

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

ich habe versucht Aufruf toggleModal() mit diesem Ansatz ohne Erfolg. Fehle ich hier etwas?

Jede Hilfe wäre willkommen.

Danke wie immer für die Tipps. :)

EDIT: @ developer033, bin ich ruft die Richtlinie in meinem HTML wie folgt aus:

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

Wo Sie die 'directive' anrufen? – developer033

+0

Hallo, bitte sehen Sie meine bearbeitete Frage. :) –

+0

Sie rufen toggleModal() von außerhalb der Direktive auf? –

Antwort

1

Wenn ng-click arbeiten, verwenden Sie nicht $scope

statt ng-click="$scope.toggleModal() diesesVersuchen

diese fiddle zeigt ng-click, onclick und click event listener Methoden

hoffe, das hilft :)

+0

Danke. Gilt das auch, wenn ich die Anweisung in meinem HTML aufruft, zum Beispiel '' anstelle von ''? –

+0

@DeeJ. Ja. '' funktioniert wie erwartet –

+0

Hat wie empfohlen funktioniert. Es funktioniert endlich wieder. Vielen Dank! :) –

1

Sie $ Umfang nicht innerhalb ng-click.Call verwenden wie dieses

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