угловая функция вызова ng-click в контроллере

Question

У меня есть кнопка на моей странице, которая изменяет модель (добавляет новый объект).

Я надеялся, что смогу сделать это в HTML, просто нажав новый объект на массив, но похоже, что мне может потребоваться вызвать контроллер для его выполнения. По какой-то причине, хотя он не может найти функцию в моем контроллере.

Вот моя кнопка:

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

Вот один из (нескольких) контроллеров на этой странице:

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

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

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

Это не делает ничего. Нет ошибок, только кнопка ничего не делает. У меня не было выбора, кроме как добавить зависимость $ scope. Это работает:

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

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

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

Итак, зачем с Vm = это, если я не могу его использовать?

-

Я должен упомянуть, есть и другие события, нажмите на странице, но я не имею ни малейшего представления, как они при эксплуатации:

<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]

Мой маршрутизатор:

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

Моя вторая попытка на кнопку:

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

Моя вторая попытка на контроллере:

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

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

Answer 1

Вы не показать, как вы ссылаетесь контроллер в HTML, но для того, чтобы первый вариант (тот без $scope), чтобы работать, вы необходимо использовать:

ng-controller = "myController as ctrl" 

А потом звонить addCarton вы используете:

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

Answer 2

Изменить <button ng-click="addCarton()">Add a carton</button> <button ng-click="vm.addCarton()">Add a carton</button>. Если эта кнопка находится в пределах объема контроллера, тогда она будет работать.

Answer 3

ОК, я нашел область действия внутри.

Я вообще этого не понимаю.

ОК, похоже, что он определяет контроллер для модального в пределах да результата ответа от предыдущего модального да.

(см мои встроенные комментарии: // ****)

(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) { 
    } 
})();