Angularjs 控件在ui引导模式中未绑定

我正在将我的控制器重构为模态控制器。由于某些原因，我无法让模态以与$scope相同的方式使用controllerAs

它似乎和设置一样简单 1.我把它命名为控制器 2.在返回对象中调用controllerAs 3.bindToController:true 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

（函数（）{
"严格使用",；
有棱角的
.module（'app.components.modal'）
.指令（“myModal”，myModal）；
函数myModal（）{
返回{
限制：'E'，
作用域：{}，
模板：“啤酒”，
控制器：ModalController，
controllerAs:'vm'，
bindToController:true
}
}
函数ModalController（$modal、$log、$scope）{
var vm=这个；
$scope.animationEnabled=true；
vm.open=open；
函数open（）{
var modalInstance=$modal.open({
动画：$scope.animationEnabled，
templateUrl:'app/components/modal/modal.html'，
控制器：ModalInstanceCtrl，
controllerAs:vm，
bindToController：对，
尺寸：“lg”
//决心：{
//标题：函数（）{
//返回“培训信息”；
//  }
// }            
});
modalInstance.result.then（函数（selectedItem）{
console.log（“已确认：+selectedItem”）；
$scope.selectedItem=selectedItem；
}，函数（）{
$log.info（'modal disposed at:'+new Date（））；
});
};
}
函数ModalInstanceCtrl（$scope，$modalInstance）{
var vm=这个；
$scope.ok=函数（）{
//console.log（'beer'，$scope.beer）；
//log（'IBU'，$scope.IBU）；
console.log（'clicked'）；
//$modalInstance.close（$scope.selected.item）；
$modalInstance.close（）；
};
$scope.cancel=函数（）{
console.log（'clicked'）；
$modalInstance.disclose（'cancel'）；
};
}
})(); // iffe语句函数的结束

我的模式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

（函数（）{
"严格使用",；
有棱角的
.module（'app.components.modal'）
.指令（“myModal”，myModal）；
函数myModal（）{
返回{
限制：'E'，
作用域：{}，
模板：“啤酒”，
控制器：ModalController，
controllerAs:'vm'，
bindToController:true
}
}
函数ModalController（$modal、$log、$scope）{
var vm=这个；
$scope.animationEnabled=true；
vm.open=open；
函数open（）{
var modalInstance=$modal.open({
动画：$scope.animationEnabled，
templateUrl:'app/components/modal/modal.html'，
控制器：ModalInstanceCtrl，
controllerAs:vm，
bindToController：对，
尺寸：“lg”
//决心：{
//标题：函数（）{
//返回“培训信息”；
//  }
// }            
});
modalInstance.result.then（函数（selectedItem）{
console.log（“已确认：+selectedItem”）；
$scope.selectedItem=selectedItem；
}，函数（）{
$log.info（'modal disposed at:'+new Date（））；
});
};
}
函数ModalInstanceCtrl（$modalInstance）{
var vm=这个；
vm.ok=函数（）{
//console.log（'beer'，$scope.beer）；
//log（'IBU'，$scope.IBU）；
console.log（'clicked'）；
//$modalInstance.close（$scope.selected.item）；
$modalInstance.close（）；
};
vm.cancel=函数（）{
console.log（'clicked'）；
$modalInstance.disclose（'cancel'）；
};
}
})(); // iffe语句函数的结束

---

似乎没有一个明确的原因表明vm.ok（）不能在连接到模式的按钮上工作。我没有得到一个错误

上面的代码几乎是正确的。我想用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:vm。而不是controllerAs“vm”。我在上面为此设置了vm。那是行不通的。谢谢你帮我改正错误。