控制器中的角度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) { 
    } 
})();