angularjs - controllerAs 在 ui-bootstrap 模式中没有绑定(bind)

Question

我正在将我的 Controller 重构为 controllerAs 作为我的模态。出于某种原因，我无法让模态以与 $scope

一起工作的方式与 controllerAs 一起工作

看起来就像设置一样简单 1.我在 Controller 中命名这个 2.在返回对象中调用controllerAs 3.绑定(bind)到 Controller :真 4. 将 ng-click 更改为 = ng-click="vm.ok()"

但是没有效果

这是带有 $scope 的原始文件。该指令工作得很好。

(function() {
    'use strict';

    angular
        .module('app.components.modal')
        .directive('myModal', myModal);



        function myModal() {
            return {
                restrict: 'E',
                scope: {},
                template: "<button class='btn btn-danger' ng-click='vm.open()'>Beer </button>",
                controller: ModalController,
                controllerAs: 'vm',
                bindToController: true
            }
        }

        function ModalController($modal, $log , $scope) {
            var vm = this;
            $scope.animationsEnabled = true;

            vm.open = open;

            function open() {
                var modalInstance = $modal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'app/components/modal/modal.html',
                    controller: ModalInstanceCtrl,
                    controllerAs: vm,
                    bindToController: true,
                    size: 'lg'
                    // resolve: {
                    //  title: function() {
                    //      return 'training Info';
                    //  }
                    // }            
                });
                modalInstance.result.then(function(selectedItem) {
                    console.log("Confirmed: "+ selectedItem);
                    $scope.selectedItem = selectedItem;
                }, function() {
                    $log.info('modal dismissed at: ' + new Date());
                });
            };
        }

        function ModalInstanceCtrl($scope, $modalInstance) {
            var vm = this;
            $scope.ok = function () {
                // console.log('beer', $scope.beer);
                // console.log('IBU',$scope.IBU);

                console.log('clicked');
               // $modalInstance.close($scope.selected.item);
               $modalInstance.close();
            };

            $scope.cancel = function () {
                console.log('clicked');
                $modalInstance.dismiss('cancel');
            };
        }



    })(); // end of iffe statement function

我的模式 html 文件代表 $scope。这个也可以

 <div class="modal-header" >
  <button type="button" class="close" ng-click="$hide()">&times;</button>
  <h4 class="modal-title" ></h4>
</div>
<div class="modal-body" >
  <form name="beerForm"> 
    <div class="form-group">
      <label> Beer Name</label>
      <input type="text" class="form-control" placeholder="beer" ng-model="beer.beerName">
    </div>
    <div class="form-group">
      <label> IBU</label>
      <input type="number" class="form-control" placeholder="IBU" ng-model="beer.IBU">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" ng-modal="beer.Name"ng-click="ok()">Cancel</button>
  <button type="button" class="btn btn-danger" ng-modal="beer.IBU" ng-click="cancel()">Confirm</button>
</div>

现在，我将 View 模型的 $scope 更改为 vm，并将 vm 添加到模态按钮，如下所示: vm.ok() vm.cancel() 然后按钮将不再起作用。

(function() {
    'use strict';

    angular
        .module('app.components.modal')
        .directive('myModal', myModal);



        function myModal() {
            return {
                restrict: 'E',
                scope: {},
                template: "<button class='btn btn-danger' ng-click='vm.open()'>Beer </button>",
                controller: ModalController,
                controllerAs: 'vm',
                bindToController: true
            }
        }

        function ModalController($modal, $log , $scope) {
            var vm = this;
            $scope.animationsEnabled = true;

            vm.open = open;

            function open() {
                var modalInstance = $modal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: 'app/components/modal/modal.html',
                    controller: ModalInstanceCtrl,
                    controllerAs: vm,
                    bindToController: true,
                    size: 'lg'
                    // resolve: {
                    //  title: function() {
                    //      return 'training Info';
                    //  }
                    // }            
                });
                modalInstance.result.then(function(selectedItem) {
                    console.log("Confirmed: "+ selectedItem);
                    $scope.selectedItem = selectedItem;
                }, function() {
                    $log.info('modal dismissed at: ' + new Date());
                });
            };
        }

        function ModalInstanceCtrl( $modalInstance) {
            var vm = this;
            vm.ok = function () {
                // console.log('beer', $scope.beer);
                // console.log('IBU',$scope.IBU);

                console.log('clicked');
               // $modalInstance.close($scope.selected.item);
               $modalInstance.close();
            };

            vm.cancel = function () {
                console.log('clicked');
                $modalInstance.dismiss('cancel');
            };
        }

    })(); // end of iffe statement function

似乎没有明确的理由表明 vm.ok() 不能在附加到模态的按钮上工作。我没有收到错误。

Answer 1

上面的代码几乎是正确的。我想使用 controllerAs。

函数 ModalController 有一个重大错误。我正在设置 var vm = this 。另外，我设置了 controllerAs: vm。我需要

************** 语录 *************

controllerAs: 'vm'   // this would have been the correct response.


function ModalController($modal, $log , $scope) {
        var vm = this;
        $scope.animationsEnabled = true;

        vm.open = open;

        function open() {
            var modalInstance = $modal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'app/components/modal/modal.html',
                controller: ModalInstanceCtrl,
                // here is where i should have controllerAs: 'vm'
                controllerAs: vm,
                bindToController: true,
                size: 'lg'
                // resolve: {
                //  title: function() {
                //      return 'training Info';
                //  }
                // }            
            });
            modalInstance.result.then(function(selectedItem) {
                console.log("Confirmed: "+ selectedItem);
                $scope.selectedItem = selectedItem;
            }, function() {
                $log.info('modal dismissed at: ' + new Date());
            });
        };
    }