标签: angular-strap

由于某种原因,模态框工作正常,但它不加载我指定的任何模板.

我的控制器有这个代码;

var brnSearchModal = $modal({ scope: $scope, template: "app/rrn/searchBrn.html", contentTemplate: false, html: true, show: false });

$scope.showModal = function () {
    brnSearchModal.$promise.then(brnSearchModal.show);
};

我的HTML看起来像这样;

<button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top">
    BRN Lookup
</button>

我的模板在一个文件中,看起来像这样;

<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" ng-show="title">
                <button type="button" class="close" ng-click="$hide()">&times;</button>
                <h4 class="modal-title" ng-bind="title">Hello, World!</h4>
            </div>
            <div class="modal-body" ng-bind="content">Lorem ipsum dolor.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
            </div>
        </div>
    </div>
</div>

没有错误一切似乎工作正常但模板不加载.如果我在一点调试角度带,模板被加载但随后消失并留下一个空白模态.

我一直在寻找一个基于AngularJS的启动项目的组件集.

经过一些研究,我发现了三个可以适用的常见组件集.

第一个是AngularJS Bootstrap UI.看起来很清楚,但没有足够的示例和文档.

第二个是角带.我已经看到它是一个带有一些附加功能的bootstrap.js的简单实现,但它看起来很简单.

最后一个是QuantumUI.我看到它很神奇,但它看起来很新.

这些框架的经验是什么？你能列出他们的优点吗？

我正在使用angular-strap的模态,并建立了自己的模板.我的问题是我的模板有2个按钮,但是,我会更改这些按钮的文本和功能.因此,我想在打开它之前将该数据传递给模态.

在文档中说

// Pre-fetch an external template populated with a custom scope
  var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.tpl.demo.html'});

但是,我无法让它工作.请注意,我只想将一些值传递给模态范围,而不是我的整个父范围(这是示例似乎做的)

我正在使用AngularJS 1.2.12和angular-strap 2.0.0-rc.2(mgcrea.github.io/angular-strap/),我找不到从控制器中打开datepicker/timepicker小部件的方法.我想使用带有日历图标按钮的输入组,如下所示:

<div class="input-group">
    <input class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
        <i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</div>

我现在可以轻松地为按钮提供ng-click功能,并从我的控制器打开日历.我只是找不到如何做到这一点的方法.有任何想法吗？

我想在我的代码中看到一个单选按钮组.我使用AngularJs,Angular-Strap和Bootstrap.

问题是,当我点击另一个按钮时,控制器中的变量不会更新.默认值已设置.如果我删除输入标签周围的标签,更新发生...我不知道这是一个错误,或者我是否做错了什么..

我希望我提供了你需要的任何信息.谢谢你的帮助!!

版本:AngularJS:1.2.16 AngularStrap:2.0.2 Bootstrap:3

HTML:

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/style.css" rel="stylesheet" />
<link href="Content/bootstrap-additions.css" rel="stylesheet" />
<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">

单选按钮:

<label class="control-label">Group By:</label>

<div class="btn-group" ng-model="groupBy.value" data-bs-radio-group>
  <label class="btn btn-default" for="all">
    <input name="all" type="radio" class="btn btn-default" value="all">
     All
    </label>

   <label class="btn btn-default" for="room">
     <input name="room" type="radio" class="btn btn-default" value="room">
      Room
   </label>

   <label class="btn btn-default" for="category">
     <input name="category" type="radio" class="btn btn-default" value="category">
      Category
   </label>
</div>

二手图书馆:

<script src="libraries/angular.min.js"></script>
<script src="libraries/jquery.min.js"></script>

<!-- UI Libs -->
<script src="libraries/bootstrap.min.js"></script>
<script src="libraries/angular-strap.min.js"></script> …

我有一个带控制器的Angular应用程序,它Angular-Strap在函数调用期间显示模态窗口.它在Chrome中正常运行,但我无法进行有效的单元测试.

App模块和FooController:

var app = angular.module("app", ["mgcrea.ngStrap"]);

app.controller("FooController", function($scope, $modal) {
    var fooModal = $modal({
        title: 'Foo',
        content:'Bar',
        show: false,
        html: true,
        backdrop: 'static',
        placement: 'center'});

    angular.extend($scope, {
        makeItFoo: function() {
            fooModal.show();
        }
    });
});

控制器规格:

describe('FooController', function () {
    var scope, controller, modal;

    beforeEach(module('app', function ($provide) {
        // Stub out $modal service
        $provide.value('$modal', function () {
            return {
                hide: function () { },
                show: function () { }
            };
        });
    }));

    beforeEach(inject(function ($rootScope, $controller, $injector) {
        //set …

我们有一个网页,其中包含<input>我们附加自定义自动完成组件的文本(准确地使用AngularStrap的Typeahead).

Safari显然认为,输入包含一个人的姓名,因此提供了一个自动填充菜单,其中包含从系统地址簿中填充的值(截屏顶部的小菜单;还要注意Safari添加的相应图标,以绿色圈出).

这导致以下问题:

1. 该字段标题为"名称",但并不意味着包含人名.因此提供个人建议毫无意义.

2. Safari的内置菜单模糊了我们的自定义建议菜单,如Safari的建议下面的屏幕截图所示.

我尝试了以下方法来摆脱Safari的建议:

1. 将name和" id属性"中的属性更改为"title"或"GoToHellSafari".没有帮助.

2. 添加autocomplete="off",添加autocomplete="false".没有帮助.

3. 实际更改文本内<label>的东西除了"名称",如"标题".这样,自动填充消失了.

4. 切id之间的连接会<input>和<label>通过删除id和name属性.没有帮助.

虽然选项(3)看起来很有希望,但我有以下明显的问题:我希望该标签读作"Name".有什么建议？

我正在使用AngularStrap创建标签,并希望动态加载每个html片段,如下面的问题所示,但也想指定一个动态控制器.

请参阅: AngularStrap选项卡加载html片段

这是我的javascript和html.

function WorkspaceCtrl($scope, $window, $location) {
  // Tab directive
  $scope.tabs = [
    {
        title:'Search',
        page: 'templates/workspace/search.ejs',
        controller: SearchCtrl
    },
    {
        title:'My Searches',
        page: 'templates/workspace/my_searches.ejs',
        controller: MySearchesCtrl
    },
    {
        title:'Community Searches',
        page: 'templates/workspace/community_searches.ejs',
        controller: CommunitySearchesCtrl
    }
  ];
  $scope.tabs.activeTab = 1;
}

<body ng-controller="WorkspaceCtrl">
    <div class="container">
        <section id="tab">
            <div class="bs-docs-example">
            <div ng-model="tabs.activeTab" bs-tabs>
                <div ng-repeat="tab in tabs" data-title="{{ tab.title }}">
                </div>
                <div ng-include src='tabs[tabs.activeTab].page' ng-controller="tabs[tabs.activeTab].controller"></div>
            </div>
            </div>
        </section>
    </div>
</body>

动态页面工作正常,但控制器不仅不起作用,而且还阻止加载动态片段.角带标签是否支持此行为？提前致谢.

我想使用一个按钮来显示和隐藏日期选择器.

http://mgcrea.github.io/angular-strap/##datepickers

没有关于如何做到这一点的文件

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 

'mgcrea.ngStrap']);

app.controller('MainCtrl', function($scope) {
});

'use strict';

angular.module('mgcrea.ngStrapDocs')

.config(function($datepickerProvider) {
  angular.extend($datepickerProvider.defaults, {
  dateFormat: 'dd/MM/yyyy',
  startWeek: 1,trigger:manual
  });
  })

.controller('DatepickerDemoCtrl', function($scope, $http,$datepicker) {


 //ng-click
  $scope.datepickerpop = function() {

   $datepicker.show();
   //$datepicker._show();

  };

 });

我正在努力寻找使用Angular-Strap模态/控制器的正确方法.

是的,调用代码可以注入$scope,使其可用于模态.但是有一些问题.

myModal = $modal({
scope: $scope,
template: 'template.html',
show: false,
backdrop: "static",
keyboard: false,
persist: true

});

这将使用潜在的仅模态方法和属性污染调用控制器.

我通常使用"controllerAs",因此首先甚至没有$scope注入模态!

您可以创建一个新的$scope,然后插入方法,但同样,这将需要注入$scope父控制器.坏坏.

如果我ng-controller在模态模板中使用,我可以拥有我的控制器.但是他给了我另一个问题:现在我无法将数据注入到模态控制器中,并且我的调用代码无法知道何时关闭模态并且从模态返回数据也变成了一件苦差事(涉及工厂只是为了保持父和子控制器数据同步).

我真的很挣扎如何使这成为最好的方式.

有任何想法吗？

干杯

更新

这就是我现在这样做的方式:

在我的模板中,我制作了一个打开模态的指令.
例:

<my-modal
        on-update="ctrl.OnDialogUpdate">
</my-modal>

所以基本上该指令调用我的模态,当模态关闭或想要返回结果时,它调用指令参数中指定的方法.

这是指令的外观:

(function() {

'use strict';

angular.module('app').directive('myModal',myModal);

function myModal(){

    return {

        restrict: 'E',

        // The modal callback specified in the directive tag
        scope: {
            onUpdate: '&?'
        },

        replace: true,

        // This is the template for the directive, not …