AngularJS - 函數未被調用？

Question

我下面寫在我的控制器

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) 
     }); 
    } 
}]); 

我想這樣的呼籲，但點擊按鈕selectCampaign()不會調用代碼，並沒有錯誤日誌。我能夠調用fetchPathTemplates()

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

Answer 1

你應該爲了從視圖中調用它們定義你的方法爲$scope的性質，他們並不需要被添加到控制器的prototype。

控制器：

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

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

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

查看代碼：

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