Angular Bootstrap Modal弹出窗口自动对焦不起作用

亚瑟·谢赫(Yasser Shaikh)

我已经实现了使用角引导程序引导程序模态,效果很好。

这是我使用的代码的链接

在我的模式中,我只有一个输入字段(文本框)需要用户填写,还有一个保存和取消按钮。我希望当显示模式时,文本框应具有焦点。

我尝试了在autofocus其他情况下不起作用属性。

下面粘贴的是我在模式上的html。

<div class="modal-header panel panel-heading">
    <button type="button" class="close" ng-click="ok()">×</button>
    <h4 class="modal-title">Add Project</h4>
</div>
<div class="modal-body">
    <input autofocus="autofocus" type="text" class="form-control" id="ProjectName" placeholder="Enter project name here" data-ng-model="ProjectName" tab-index="1"/>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()" tab-index="2">Create</button>
    <button class="btn btn-default" ng-click="cancel()" tab-index="3">Cancel</button>
</div>

我该如何工作?

苏达山·卡莱伯

这是带有修复程序插件链接:您需要为其创建指令

app.directive('focusMe', function($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        console.log('value=',value);
        if(value === true) { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
      element.bind('blur', function() {
        console.log('blur')
        scope.$apply(model.assign(scope, false));
      })
    }
  };
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 2 [(ngModal)] 在 Bootstrap 弹出窗口中不起作用

来自分类Dev

Bootstrap弹出窗口不起作用

来自分类Dev

angular.bootstrap不起作用

来自分类Dev

angular.bootstrap不起作用

来自分类Dev

Bootstrap Angular Datepicker格式不起作用

来自分类Dev

Angular Bootstrap Modal弹出窗口不会调整大小(大)

来自分类Dev

Bootstrap Popover在传单弹出窗口内部不起作用

来自分类Dev

Bootstrap Popover在传单弹出窗口内部不起作用

来自分类Dev

设置为外部单击时,Angular Bootstrap下拉列表自动关闭不起作用

来自分类Dev

Bootstrap Modal不起作用

来自分类Dev

Bootstrap Modal不起作用

来自分类Dev

Bootstrap的弹出窗口仅在按钮上起作用-锚点或跨度不起作用

来自分类Dev

angular-bootstrap添加新指令不起作用

来自分类Dev

Bootstrap 表单验证在 angular2 中不起作用

来自分类Dev

Bootstrap Angular - 复选框值不起作用

来自分类Dev

Bootstrap 面板在 Angular 最新 cli 中不起作用

来自分类Dev

Bootstrap Modal弹出组件在单击角形元素时不起作用

来自分类Dev

页面上有 iframe 时,Bootstrap 模式弹出窗口不起作用

来自分类Dev

Bootstrap 模式弹出窗口在 IE 和 Mozilla 中不起作用

来自分类Dev

Firefox中的Bootstrap Modal不起作用

来自分类Dev

Bootstrap modal在3.3.6中不起作用

来自分类Dev

bootstrap 3模式窗口不起作用

来自分类Dev

Bootstrap 3.0模型窗口不起作用,

来自分类Dev

如何使Angular Bootstrap工具提示起作用?

来自分类Dev

使用Angular UI Bootstrap弹出窗口中的表单?

来自分类Dev

在外部单击时隐藏Angular UI Bootstrap弹出窗口

来自分类Dev

在angular-bootstrap中以编程方式打开弹出窗口

来自分类Dev

没有Bootstrap CSS的Angular JS中的模式弹出窗口

来自分类Dev

Bootstrap 和 angular ,模态弹出窗口未显示

Related 相关文章

  1. 1

    Angular 2 [(ngModal)] 在 Bootstrap 弹出窗口中不起作用

  2. 2

    Bootstrap弹出窗口不起作用

  3. 3

    angular.bootstrap不起作用

  4. 4

    angular.bootstrap不起作用

  5. 5

    Bootstrap Angular Datepicker格式不起作用

  6. 6

    Angular Bootstrap Modal弹出窗口不会调整大小(大)

  7. 7

    Bootstrap Popover在传单弹出窗口内部不起作用

  8. 8

    Bootstrap Popover在传单弹出窗口内部不起作用

  9. 9

    设置为外部单击时,Angular Bootstrap下拉列表自动关闭不起作用

  10. 10

    Bootstrap Modal不起作用

  11. 11

    Bootstrap Modal不起作用

  12. 12

    Bootstrap的弹出窗口仅在按钮上起作用-锚点或跨度不起作用

  13. 13

    angular-bootstrap添加新指令不起作用

  14. 14

    Bootstrap 表单验证在 angular2 中不起作用

  15. 15

    Bootstrap Angular - 复选框值不起作用

  16. 16

    Bootstrap 面板在 Angular 最新 cli 中不起作用

  17. 17

    Bootstrap Modal弹出组件在单击角形元素时不起作用

  18. 18

    页面上有 iframe 时,Bootstrap 模式弹出窗口不起作用

  19. 19

    Bootstrap 模式弹出窗口在 IE 和 Mozilla 中不起作用

  20. 20

    Firefox中的Bootstrap Modal不起作用

  21. 21

    Bootstrap modal在3.3.6中不起作用

  22. 22

    bootstrap 3模式窗口不起作用

  23. 23

    Bootstrap 3.0模型窗口不起作用,

  24. 24

    如何使Angular Bootstrap工具提示起作用?

  25. 25

    使用Angular UI Bootstrap弹出窗口中的表单?

  26. 26

    在外部单击时隐藏Angular UI Bootstrap弹出窗口

  27. 27

    在angular-bootstrap中以编程方式打开弹出窗口

  28. 28

    没有Bootstrap CSS的Angular JS中的模式弹出窗口

  29. 29

    Bootstrap 和 angular ,模态弹出窗口未显示

热门标签

归档