小编Ste*_*eve的帖子

关闭所有Angular JS Bootstrap popovers,点击屏幕上的任意位置?

我使用Angular指令进行引导.

我在他们的例子中有一个popover:

<button popover="Hello, World!" popover-title="Title" class="btn btn-default ng-scope">Dynamic Popover</button>
Run Code Online (Sandbox Code Playgroud)

当您再次单击该按钮时它会关闭.当用户点击任何地方时,我想关闭它 - 以及任何其他开放式弹出窗口.

我没有看到内置的方法来做到这一点.

javascript jquery twitter-bootstrap angularjs

8
推荐指数
2
解决办法
8769
查看次数

Bootstrap 3 popovers可以使用外部div作为内容吗?

这里的所有示例http://getbootstrap.com/javascript/#popovers都使用带有data-content属性的popover的内联内容.

我想要做的是div在我的页面上设置隐藏的内容,并从弹出窗口触发器中定位,如:

<div id="myPopoverContent">
   ...stuff...
</div>
Run Code Online (Sandbox Code Playgroud)

然后

<a ng-href="" data-toggle="popover"><span class="badge">12</span> You have 12 messages.</a>
Run Code Online (Sandbox Code Playgroud)

作为触发器.但是如何触发?

jquery popover twitter-bootstrap twitter-bootstrap-3

8
推荐指数
1
解决办法
1万
查看次数

Angular js停止从Bootstrap"dropdown-toggle"事件传播

我有一个Angular JS 1.3应用程序.

在其中我有一个表格行转发器与ng-click:

<tr ng-repeat-start="user in users.users" ng-click="showDetails = !showDetails">
 <!-- main row, with the menu td shown below -->
<tr class="row-details" ng-show="showDetails" ng-class="{ 'active': showDetails }">
    <td>this is the row that hows details</td>
</tr>
<tr ng-repeat-end></tr>
Run Code Online (Sandbox Code Playgroud)

其中切换打开详细视图.工作良好.但是现在我需要在每个tds中添加另一个项目,一个Bootstrap按钮菜单:

<td>
<div class="btn-group">
  <div ng-switch on="user.status">
    <button class="btn btn-link btn-gear dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-cog"></i></button>

      <ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Inactive">
        <li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
      </ul>

      <ul class="dropdown-menu dropdown-menu-right" role="menu" ng-switch-when="Invited">
        <li><a href="" ng-click="users.toast.resendInvite()">Resend invitation</a></li>
        <li><a href="" ng-click="users.modals.deleteUser()">Delete</a></li>
      </ul>

      <ul class="dropdown-menu …
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap angularjs

8
推荐指数
1
解决办法
3765
查看次数

在固定高度的容器中使用同位素库?

我正在使用Isotope进行项目.我们买了一张商业执照.

我需要将同位素瓷砖放在固定尺寸的容器中(高度特别重要)才能在更大的布局中工作.

我尝试在容器上设置css高度:

<style type="text/css">
  #container {
    width:990px;
    height: 550px !important;
    overflow: scroll;
  }
</style> 
Run Code Online (Sandbox Code Playgroud)

但是这会创建一个不可滚动的容器.我错过了什么?

jquery jquery-isotope

7
推荐指数
1
解决办法
5037
查看次数

在Bootstrap 3中创建基础样式的块网格?

在Zurb Foundation 3+中,他们有一个"块网格"的CSS结构,这是一个无序列表,您可以在其中指定一行中的项目数.

这是他们的文档.

我无法在Bootstrap 3中看到这样做; 只有列.我希望能够轻松地将重复元素(例如LI)显示为响应式网格,我可以在其中指定断点的数量,就像在Foundation中一样.

我想我可以自己动手,但想知道是否有人有过建议或之前曾经遇到过这个问题.

css responsive-design zurb-foundation twitter-bootstrap-3

7
推荐指数
1
解决办法
6735
查看次数

Angular:"tab"键码事件未触发

我有一个带有处理程序的表单字段,我想在用户故意接受带有return/enter或者选项卡到下一个字段的值后触发.在这种情况下我不能使用onBlur,因为它当然会在用户或系统模糊字段时触发.我只想要一个密钥.

所以我有这个.我有第enter一个,它很棒.但是keycode==9不会触发处理程序.焦点只是移动到下一个领域.

ng-keyup="($event.keyCode == 13 || 
           $event.keyCode == 9) 
           && packages.submitNumber('add', packages.addTrackingNumber)"
Run Code Online (Sandbox Code Playgroud)

有没有办法在enterOR 上引发这场火灾tab

javascript jquery keycode angularjs

7
推荐指数
1
解决办法
7548
查看次数

Angular CLI:在没有完全重载的情况下在Sass编译上注入css?

我们的Angular 4应用程序搭建了角度cli,使用scss作为默认样式.我们运行应用程序

ng serve --sourcemap --extractCss -o

获取scss源地图.这工作正常,应用程序编译,运行,源地图工作等.

但是,来自Angular1/Gulp/Browsersync世界,我错过了在没有完整页面重新加载的情况下注入构建的css.目前,每当我编辑sass文件时,webpack都会在Chrome中编译并重新加载页面.

这是现在唯一的工作方式吗?没有重新加载就没有办法简单地强制刷新css(就像在Gulp时代的browsersync那样)?

css angularjs webpack browser-sync angular-cli

7
推荐指数
1
解决办法
466
查看次数

Angular 6 HTML选择菜单设置默认值

我习惯于使用较旧的angularjs方式来做选择菜单并选择默认值等,并且在Angular(6)中如何做到这一点时遇到了麻烦.

我有一系列菜单项:

  fontChoices = [
    {
      label: 'Trebuchet',
      value: "'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif"
    },
    {
      label: 'Georgia',
      value: 'Georgia, times, serif'
    }
 ];
Run Code Online (Sandbox Code Playgroud)

和一个保存所选字体的变量: brandFont

我的html菜单是

<select [(ngModel)]="brandFont"
        id="brandFontmenu"
        (ngModelChange)="setStyle($event,'--font-family-brand')">
   <option *ngFor="let font of fontChoices"
           [value]="font.value">{{font.label}}
   </option>
</select>
Run Code Online (Sandbox Code Playgroud)

菜单工作,显示我的fontChoices,并更改选择激活我的功能.我可以选择Georgia或Trebuchet,css变量和页面更新应该如此.

  setStyle(e, which) {
    document.documentElement.style.setProperty(which, e);
  }
Run Code Online (Sandbox Code Playgroud)

在页面加载时,css变量设置为Trebuchet.我可以参与ngOnInit其中

this.brandFont = String(styles.getPropertyValue('--font-family-brand')).trim();
Run Code Online (Sandbox Code Playgroud)

我的问题是,如何让选择菜单在页面加载时显示这个第一选择?我尝试了this.brandFont = this.fontChoices[0];但是菜单选择项是空的,直到从菜单中选择了某些内容.

html javascript angular

7
推荐指数
1
解决办法
2万
查看次数

在 Angular 模板 HTML 中使用 css 变量?

我有一个组件,它根据 json 文件中存储的值设置 div 的背景颜色,然后循环显示一堆颜色样本。

   <div class="color-swatch-color"
        [style.background-color]="foo"></div>
Run Code Online (Sandbox Code Playgroud)

它与变量中的十六进制颜色配合得很好:foo="#f00";

但没有颜色显示我使用的颜色变量:foo = 'var(--primary)';

div 显示在 HTML 中,不会引发任何错误,但 div 上根本没有背景颜色。

更新

我应该更清楚。我有一个使用诸如 --primary、-- secondary (如 Bootstrap)之类的变量的主题。我想展示这些颜色的样本。但是,我在 CSS 类中使用变量,以便可以通过 body 标记上的“主题”类更改它们的值。

因此,我尝试将样本设置为变量,以便当用户更改 body 标记上的类时,样本会像我的应用程序的其余部分一样自动更改颜色。

看看这个 stackblitz。如果我直接分配变量,它会分配背景颜色。通过角度变量,它不分配任何颜色。

我这样做是因为如果你打开开发工具,你可以选择我的品牌颜色变量并即时更改它;这类似于切换主题,其中“brandcolor”可以改变访问主题

html javascript css css-variables angular

7
推荐指数
2
解决办法
1万
查看次数

在 Mac OSX 的 Sublime Text 中双击选择带连字符的作品?

在我的旧 Mac 上,我以某种方式对其进行了设置,这样如果我双击一个带连字符的单词,我就会选择整个内容(所有部分和连字符)。

我刚买了一台新 Mac 并且正在设置它,但不知何故双击一个带连字符的单词只选择我只得到我点击的部分的单词。单词由连字符分隔。

我检查了我的 Sublime Text 3 首选项中的单词分隔符设置,连字符不存在:

"word_separators": "./\\()\"',.;:<>~!%^&*|+=[]{}`~?"
Run Code Online (Sandbox Code Playgroud)

那么,这个集合在哪里呢?在崇高还是在操作系统的某个地方?

macos sublimetext2 sublimetext3

6
推荐指数
0
解决办法
670
查看次数