标签: angular-strap

我想将AngularJS和Twitter Bootstrap整合到一个全新的Web应用程序中.似乎已经为Bootstrap编写了AngularJS指令.

但是,仔细观察,似乎这些指令并未涵盖所有Bootstrap.我可以将AngularUI Bootstrap代码与原始Bootstrap结合使用以获得完整性吗？它可以在第一时间完成吗？

我偶然发现了另一个名为AngularStrap的 Angular项目.我能把这三个结合起来吗？

将AngularJS和Twitter Bootstrap结合起来以获得完整性的最佳方法是什么？

我有一个连接到角度的表单,使用它进行验证.我能够使用ng-show指令显示错误消息,如下所示:

<span ng-show="t3.f.needsAttention(f.fieldName)" ng-cloak>
    <span ng-show="f.fieldName.$error.required && !f.fieldName.$viewValue">
        This field is required.
    </span>
</span>

.. f表单在哪里,t3来自表单上的自定义指令,用于检测是否尝试提交,并包含用于检查字段有效性的函数.

我想要完成的是在popover中显示验证消息.无论是bootstrap的原生popover,还是来自UI Bootstrap的popover ,我都加载了.我也可以考虑AngularStrap,如果使用该lib更容易.

我现在正在努力的是一般的弹出窗口的性质 - 它们基于点击,鼠标中心,模糊等用户事件自动显示.我想要做的是显示和隐藏基于相同的弹出窗口上面的ng-show属性中的函数.因此,当表达式返回false时隐藏它,当它返回true时,显示它.

我知道bootstrap有这个.popover('show'),但是我不应该告诉有关dom的任何角度,所以我不确定如何访问$(element).popover()if在自定义表单控制器功能中执行此操作.我错过了什么吗？

更新

重复投票中提到的解决方案仍然只显示mouseenter上的popover.我想强制它显示,好像在做$('#popover_id').popover('show').

我想显示AngularStrap下拉手动,撬动trigger结构上$dropdownProvider这样

// how dropdown is triggered - click | hover | focus | manual
app.config(function($dropdownProvider) {
    angular.extend($dropdownProvider.defaults, {
        trigger: 'manual'
    });
});

click hover focus一切正常,但为什么不manual呢？我还没有发现任何证据证明这提供了api配置选项.我怎样才能做到这一点？

事实上,这个问题似乎是在我最初的问题提出后发现的,但现在已经关闭,一年后我还没有找到解决方案.

问题:缺少有关如何使用trigger = manual的文档

我已经找到了一个例子来说明我在努力解决这个问题.为了澄清我的目标,我想在<textarea>键击(ng-model更改)时触发我的下拉菜单.我希望能够抓住下拉列表并调用一个函数来手动触发它,而不使用任何默认的触发器选项,具体而言trigger: manual,并且以直观的方式执行此操作,应该根据api提供,因此所需的解决方案不应该被限制在任何特定的触发器 - 但完全手动,以适应许多不同的用法.

Plunker Link

<textarea ng-model="expression" intellisense></textarea>

app.directive('intellisense', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
          scope.$watch(attrs.ngModel, function (v) {
                if(v) {
                  // how do I trigger dropdown …

我目前正在使用angular-ui-bootstrap $ modal来显示一个对话框,让用户搜索并选择一个文件.文件列表来自box.com,因此我使用框API搜索文件并生成缩略图以显示在搜索结果中的每个文件旁边.

缩略图生成非常慢,用户需要在同一页面中多次调用此搜索对话框.因此,如果搜索对话框在重新打开时包含先前的搜索结果,则对用户有帮助.

问题是我如何重复使用(即显示/隐藏)相同的模态实例？Angular-ui似乎每次都会破坏/重新创建对话框.角带相同的东西.

编辑

这是一个Plunkr:

var app = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {

  $scope.open = function() {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,

    });

    modalInstance.result.then(function() {
      $log.info('Modal closed at: ' + new Date());
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var …

我的日期选择器可以在Windows Chrome浏览器,Windows Safari,Mac Safari,Android浏览器的触发事件模糊中消失,除了IOS Safari浏览器.

我的代码:

<input class="title-menu-left-input form-control"
        name="birthday" data-date-format="yyyy-MM-dd"
        data-date-type="string" data-autoclose="1"
        ng-model="dateFrom" placeholder="date" data-trigger="focus"
        bs-datepicker>

任何人都可以帮我找到为什么它不会在IOS safari浏览器中的触发事件模糊中消失？提前致谢!

有一些背景可能会帮助您更多地了解我的问题.你可以访问这个页面http://mgcrea.github.io/angular-strap/#/datepickers或plunker:http://plnkr.co/edit/lUtYyIqD4ETCG5zbKrNC？p = preview .我的代码和它一样.我不知道为什么它会在Windows Chrome浏览器,Windows Safari,Mac Safari,Android浏览器的触摸事件模糊中消失,除了IOS Safari浏览器.我想知道我是否在IOS Safari中做了特殊处理.有人问过这个问题吗？

我一直在研究使用Bootstrap和Angular的选项,它似乎专注于两个:

Angular UI Bootstrap
AngularStrap

我看到只使用本机Bootstrap的第三种选择.所有方法的利弊是什么？这似乎暗示Angular UI Bootstrap功能不完整:

使用哪一个,AngularUI Bootstrap或AngularStrap？

我目前正在使用Twitter Bootstrap开发一个AngularJS项目,我正在尝试将我的Bootstrap指令转换为Angular.我决定使用AngularStrap,因为它为Bootstrap-Select提供了支持(我不确定AngularUI是否相同).该标签例如只涵盖静态的HTML虽然.有没有办法通过AngularStrap或AngularJS动态加载html片段,以便只在单击选项卡时调用它？我的html片段也需要执行javascript.

我这样做的理由是双重的.首先,每个选项卡包含相当多的内容,我不希望一次加载所有选项卡,这将减慢加载速度.第二个原因是我更喜欢对我的源代码采用更模块化的方法,而不是将所有内容都放在同一个html文件中.

我创建了另一个问题,我认为是导致此错误的原因:为什么Selenium Firefox驱动程序会在父进程溢出时认为我的模态没有显示:隐藏？

Selenium版本2.33.0
Firefox驱动程序

导致错误的代码:

        System.Threading.Thread.Sleep(5000);
        var dimentions = driver.Manage().Window.Size;
        var field = driver.FindElement(By.Id("addEmployees-password")); //displayed is true
        field.Click(); //works fine
        var element = driver.FindElement(By.Id(buttonName)); //displayed is false
        element.Click(); //errors out

它试图点击的按钮:

<div id="addEmployees" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmployeesLabel" aria-hidden="true">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Add Employee</h3>
    </div>

    <div class="modal-body">
        <p class="alert alert-info">
            <input name="addEmployees-username" id="addEmployees-username" />
            <input name="addEmployees-password" id="addEmployees-password" type="password" />
            <input name="addEmployees-employee" id="addEmployees-employee" />
        </p>
    </div>

    <div class="modal-footer">
        <button name="addEmployees-add" id="addEmployees-add" type="button" class="btn" data-ng-click="submit()">Add</button>
    </div> …

我正在尝试在我的项目中使用AngularStrap datepicker,方法是遵循AngularDart入门指南中 的说明功能很好,但看起来很不对劲.即使没有我自己的样式表加载,外观也不应该是它应该是什么.这两个截图应该澄清问题:

应该如何看待:

它看起来如何:

该应用程序是yeoman.io脚手架

bower.json配置:

{
  "name": "myapp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.14",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.1.0",
    "angular-resource": "1.2.14",
    "angular-cookies": "1.2.14",
    "angular-sanitize": "1.2.14",
    "angular-route": "1.2.14",
    "moment": "~2.5.1",
    "angular-strap": "~2.0.0",
    "angular-motion": "~0.3.2",
    "angular-animate": "~1.2.14"
  },
  "devDependencies": {
    "angular-mocks": "1.2.14",
    "angular-scenario": "1.2.14"
  },
  "resolutions": {
    "angular": "1.2.14"
  }
}

相关的index.html代码段:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.min.css" />
...
<link rel="stylesheet" href="styles/style.css"/>
....
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>

<!-- build:js scripts/vendor.js -->
<!-- …

我在悬停在fullcalendar项目上时试图显示角带弹出.

我使用eventMouseover/eventMouseout回调来显示/隐藏弹出窗口:

$scope.calendarConfig = {
  defaultView: 'basicWeek',
  eventMouseover: function(event, jsEvent, view) {
    element = $(jsEvent.target).closest('.fc-event');
    popover = $popover(element, {placement: 'bottom', contentTemplate: 'calendar-item-popover.html'});
    popover.$promise.then(popover.show);
  },
  eventMouseout: function() {
    popover.hide();
    popover = null;
  }
};

然后我有一个弹出框体模板:

<script type="text/ng-template" id="calendar-item-popover.html">
  <p>Event</p>
  <p>event: {{event | json}}</p>
</script>

我的问题是如何将'事件'传递给popover范围？

这是吸虫:http://plnkr.co/9c6BDWsYuuWAfI4HnJAH