控制器中的角度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', 

[更新]

我的路由器：

  .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

好的，我发现按钮在范围内。

我完全不理解它。

好吧，看起来他是在前一个模态的yes响应的yes结果中为模态定义控制器。

（见我的内联注释：// ****）

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