AngularJS - Fonction non appelée?

Question

J'ai sous le code écrit dans mon contrôleur

function SteppersDemoCtrl($mdStepper, $timeout) { 
    alert('hi'); 
    this.$mdStepper = $mdStepper; 
    this.$timeout = $timeout; 
    this.isVertical = true; 
    this.isLinear = false; 
    this.isAlternative = true; 
    this.isMobileStepText = true; 
    this.campaign = false; 
} 

SteppersDemoCtrl.prototype.previousStep = function() { 
    alert("Hariom");  
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.back(); 
}; 
SteppersDemoCtrl.prototype.cancel = function() { 
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.back(); 
}; 
SteppersDemoCtrl.prototype.nextStep = function() { 
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.next(); 
}; 
SteppersDemoCtrl.prototype.toggleMobileStepText = function() { 
    this.isMobileStepText = !this.isMobileStepText; 
}; 
SteppersDemoCtrl.prototype.toggleLinear = function() { 
    this.isLinear = !this.isLinear; 
}; 
SteppersDemoCtrl.prototype.toggleAlternative = function() { 
    this.isAlternative = !this.isAlternative; 
}; 
SteppersDemoCtrl.prototype.toggleVertical = function() { 
    this.isVertical = !this.isVertical; 
}; 
SteppersDemoCtrl.prototype.showError = function() { 
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.error('Wrong campaign'); 
}; 
SteppersDemoCtrl.prototype.clearError = function() { 
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.clearError(); 
}; 
SteppersDemoCtrl.prototype.showFeedback = function() { 
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.showFeedback('Step 1 looks great! Step 2 is comming up.'); 
}; 
SteppersDemoCtrl.prototype.clearFeedback = function() { 
    var steppers = this.$mdStepper('stepper-demo'); 
    steppers.clearFeedback(); 
}; 

SteppersDemoCtrl.$inject = [ 
    '$mdStepper', 
    '$timeout' 
]; 


sureApp.controller('SteppersDemoCtrl', ['$scope', '$http', '$location', '$log', '$interval', 'uiGridConstants', 'sureHttpService', 'sureCache' 
    , function ($scope, $http, $location, $log, $interval, uiGridConstants, sureHttpService, sureCache) { 




     $scope.templates = []; 
     $scope.selectedTemplate = {}; 
     $scope.fetchPathTemplates = function() { 
     var restUrl = "SomeURL" 
     sureHttpService.sureAjaxService(restUrl, false, false, false).then(function (response) { 
      if (response && response.collection && response.collection.element) { 
       $scope.templates = response.collection.element; 
       console.log("rssssssssss >>>"+$scope.templates); 
      } else { 
       // column attrubute response data error 
      } 
     }, function (error) { 
      alert("error code " + error) 
     }); 
    } 
}]); 

Je suis en train d'appeler comme ça, mais en cliquant sur le bouton selectCampaign() ne remet pas, et il n'y a pas d'erreur dans le journal. Je suis en mesure d'appeler fetchPathTemplates()

<div ui-view ng-controller="SteppersDemoCtrl as vm" layout="column"> 
..................................................... 
..................................................... 
<button ng-click="vm.nextStep();">Continue</button> 

Answer 1

Vous devez définir vos méthodes comme propriétés du $scope afin de les invoquer de la vue, ils ne doivent pas nécessairement être ajouté à prototype de l'automate.

Controller:

angular.module('myapp').controller('myCtrl', myCtrl); 

myCtrl.$inject = ['$scope']; 

function myCtrl($scope) { 
    $scope.myMethod = function() { 
     console.log('this works'); 
    } 
} 

Code Voir:

<div ng-controller="myCtrl as vm"> 
    <button ng-click="vm.myMethod();">Test</button> 
</div>