javascript - AngularJS - 函数未调用？

Question

我在 Controller 中编写了以下代码

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 的属性，以便从 View 中调用它们，不需要将它们添加到 Controller 的 prototype 中。

Controller :

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>