Question

我正在为我的模态重构我的控制器到控制器。由于某些原因，我无法使用与 $ scope

一样的方式使用控制器的模态。

看起来像设置一样简单我在控制器中说出这个名字 2.在返回对象中调用controllerAs 3. bindToController：true 4.将ng-click更改为= ng-click =＆＃34; vm.ok（）＆＃34;

但它不起作用

这是带有$ 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>

现在我将视图模型的$ 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());
            });
        };
    }

controllerAs在ui-bootstrap模式中没有绑定

1 个答案: