控制器

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

好的，我找到了按钮所在的范围。

我根本不明白。

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

（参见我的内联评论：// ****）

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