angular ng-click scope calling function in controller

Question

I have a button on my page that modifies the model (adds a new object).

I was hoping I could do it within the HTML, simply by pushing a new object onto the array, but it looks like I may need to call the controler to do it. For some reason though it can't find the function in my controller.

Here's my button:

<button ng-click="addCarton()">Add a carton</button>

Here's one of the (several) controllers on this page:

myController.$inject = ['$http', '$uibModal', 'cart'];

function myController($http, $uibModal, cart) {
    var vm = this;

    vm.addCarton = function () {
        console.log("carton added!");
    });

This does nothing at all. No errors, just the button does nothing. I had no choice but to add the $scope dependency. This works:

myController.$inject = ['$http', '$uibModal', 'cart', '$scope'];

function myController($http, $uibModal, cart, $scope) {
    var vm = this;

    $scope.addCarton = function () {
        console.log("carton added!");
   });

So, why bother with vm=this if I can't use it?

--

I should mention there are other click events on the page, but I don't have any idea how they're operating:

<button type="button" ng-click="summaryModalVm.cancel()">Cancel</button>

function myController($http, $uibModal, cart, $scope) {

    vm.dimensionsChoose = function (size) {
            $http.post('/api/shipping/estimate', cart).then(function(response) {
                var modalInstance = $uibModal.open({
                    controllerAs: 'summaryModalVm',

[ UPDATE ]

My router:

            .state('layout.cart', {
                url: '/cart',
                templateUrl: '/Content/js/apps/store/views/cart.html',
                controller: 'cartController',
                controllerAs: 'cartVm',
                data: { pageTitle: 'Cart' }
            })

My 2nd try at a button:

            <button ng-click="cartVm.addCarton()" type="button">Add a carton</button>

My 2nd try at controller:

function cartController($http, $uibModal, Cart, CartObservable) {
    var vm = this;

    vm.addCarton = function () {
        console.log(":)");
    };

Answer 1

You don't show how you are referencing your controller in HTML, but in order for the first option (the one without $scope) to work, you need to use:

ng-controller = "myController as ctrl"

And then to call addCarton you use:

<button ng-click="ctrl.addCarton()">Add a carton</button>

Answer 2

Change <button ng-click="addCarton()">Add a carton</button> to <button ng-click="vm.addCarton()">Add a carton</button> . If that's button is within scope of controller, then it would work.

Answer 3

OK, I found the scope the button is within.

I don't understand it at all.

OK, it looks like he's defining the controller for the modal within the yes result of a preceding modal's yes response.

(see my inline comments: // ****)

(function() {
    'use strict';

    angular
        .module('WizmoApp')

        .controller('cartController', cartController)
        .controller('masterCartonModalInstanceController', masterCartonModalInstanceController)
        .controller('summaryModalInstanceController', summaryModalInstanceController)
        .controller('dimensionsModalInstanceController', dimensionsModalInstanceController)
        .controller('cartModalInstanceController', cartModalInstanceController);

    cartController.$inject = ['$http', '$stateParams', '$location', '$uibModal', '$log', 'toastr', 'DTOptionsBuilder', 'DTColumnDefBuilder', 'Cart', 'CartObservable'];

    function cartController($http, $stateParams, $location, $uibModal, $log, toastr, DTOptionsBuilder, DTColumnDefBuilder, Cart, CartObservable) {
    }

    // flow:
    // open masterCarton question
    //
    // if yes, open dimensions modal, get dimensions, add purolator label to cart, open cart summary
    // if no, go straight to cart summary
    //
    // open credit card modal
    masterCartonModalInstanceController.$inject = ['$uibModal', '$uibModalInstance', 'cart'];
    function masterCartonModalInstanceController($uibModal, $uibModalInstance, cart) {
        var vm = this;


        vm.yes = function(size) {

            var modalInstance = $uibModal.open({
                templateUrl: 'dimensionsModalContent',
// **** this seems to be the creation of the controller ****
// **** for the next modal ****
                controller: 'dimensionsModalInstanceController',
                controllerAs: 'dimensionsModalVm',
                size: size,
                resolve: {
                    cart: function() {
                        return cart;
                    },
                    masterCarton: function() {
                        return vm.masterCarton;
                    }
                }
            });
        };

        vm.no = function(size) {
        };
    }

    dimensionsModalInstanceController.$inject = ['$http', '$uibModal', '$uibModalInstance', 'toastr', 'cart', 'masterCarton', 'CartObservable'];
    function dimensionsModalInstanceController($http, $uibModal, $uibModalInstance, toastr, cart, masterCarton, CartObservable) {
        var vm = this;

        vm.addCarton = function () {
            console.log(":)");
// **** the code I'm trying to activate ****
        };

    }

    summaryModalInstanceController.$inject = ['$uibModal', '$uibModalInstance', 'cart', 'masterCarton'];
    function summaryModalInstanceController($uibModal, $uibModalInstance, cart, masterCarton) {
    }

    cartModalInstanceController.$inject = ['$http', '$state', '$uibModalInstance', 'toastr', 'cart', 'masterCarton', 'shippingLabelService'];
    function cartModalInstanceController($http, $state, $uibModalInstance, toastr, cart, masterCarton, shippingLabelService) {
    }
})();