Angular-ui 引导模式无需创建新控制器

2024-02-21

plunk: http://plnkr.co/edit/85Wl5W http://plnkr.co/edit/85Wl5W如果我在同一个控制器(modalController.js)上使用 $modalInstance,而不处于模态中,则角度会被冻结。

我只是想使用 AngularJS 和 Angular-UI Bootstrap 模态服务来简化我的生活。我想在单独的文件上使用相同的控制器,但也在模态上使用。也就是说,我希望他们做同样的任务。有什么正确的方法可以做到吗?

例如。 modal.html、modalController.js。我想在模态窗口上显示这些,但在我的应用程序上也没有模态。问题是,如果我使用相同的控制器,我无法注入 $modalInstance,因为如果没有模态,它是未定义的。

提前致谢,

Alex


在旧版本的 UI-Bootstrap 0.10.0 中是可能的。即使是最新版本,它也适用于我

索引.html

<!-- if you are using Bower -->    
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>

<!-- modal -->
<!-- look at 'type' and 'id' values -->
<script type="text/ng-template" id="myTestModal.tmpl.html">
    <div class="modal-header">
        <h3>Modal Header</h3>
    </div>   

    <div class="modal-body">
        <p>Modal Body</p>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close
        </button>
        <button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something
        </button>
    </div> 
</script>

modalDemoController.js

$scope.openModal=function(){
    $scope.modalInstance=$modal.open({
        templateUrl: 'myTestModal.tmpl.html',
        scope:$scope
    });
}

$scope.close=function(){
    $scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};

$scope.doSomething=function(){
    //any actions to take place
    console.log("Do Something");
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular-ui 引导模式无需创建新控制器 的相关文章

随机推荐