我正在学习AngularJs并且有许多新术语或者我开始理解这些术语但是这个我似乎无法弄清楚我做错了什么.
我想要做的就是使用Angular-Strap在我的页面上加载一个日期选择器. http://mgcrea.github.io/angular-strap/##datepickers
我得到的错误,到目前为止还没弄清楚为什么:
未捕获错误:[$ injector:modulerr]由于以下原因无法实例化模块mgcrea.ngStrap:错误:[$ injector:unpr]未知提供者:$ datepickerProvider
我的基本理解告诉我Angular正在尝试注入一个依赖于它的模块,但我在文档中找不到$ datepickerProvider的内容,我正在使用网站上的示例代码.
Html - 标记
<!DOCTYPE html>
<html lang="en" ng-app="mgcrea.ngStrap">
<head>
...
</head>
<body ng-controller="ZenwireController">
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
<input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
<!-- Custom example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as number)</small></label>
<input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker> …我试图使用angular-strap指令,但遇到最简单设置的模块初始化错误.我已经仔细检查过几十万次,但却无法确切地看到我可能缺少的东西.
这是一个plunker链接:http://plnkr.co/edit/H1VrF63GeSQWLXHDVIW7
我得到的错误是:
Error: [$injector:modulerr] Failed to instantiate module mgcrea.ngStrap due to:
Error: [$injector:nomod] Module 'mgcrea.ngStrap' is not available! You either misspe... <omitted>...1)
我读了这个回复,但它没有回答我的问题,因为我没有使用ngSanitize或路由.这很简单.
谢谢
我正在使用AngularStrap和bootstrap.
我有一个使用它自己的控制器的模态对话框.如何使用本地控制器关闭模态？
我在一个按钮上实例化控制器,如下所示:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
userLoginController有这个:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
这显然只是一个演示,我希望它在成功登录时关闭,但这是我用来关闭它的代码.
我已经尝试以编程方式实例化模态(使用$ modal服务来创建模态)但我无法弄清楚如何通过该方法注入控制器.
如果我要使用bs-modal指令从模态中发出事件,我该如何引用模态来关闭它？
这是我的plnkr:http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
我想在select元素的值发生变化时执行一个函数(angular-strap中的select元素是html标签)
我的HTML:
<button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
我的JS:
$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];
我尝试在控制器中添加带有函数的ng-click指令,但是当元素发生变化时,它会在点击时捕获当前所选值的值
谢谢
我正在测试角带的模态窗口,并且发生了不必要的事情.在模式可见的大型文档中,浏览器滚动条消失.然后,当您关闭模式时,将再次显示浏览器滚动条并且文档会稍微折叠.
我一小时看着开发人员工具,但我找不到原因.
当文档崩溃时,这很烦人.
我怎么能阻止滚动条隐形？
<button data-animation="am-fade-and-scale" bs-modal="modal">
Open Modal
</button>
var app = angular.module('Test', ['ngAnimate', 'mgcrea.ngStrap']);
app.controller('ModalCtrl',
function($scope){
$scope.modal = {
"title" : "ModalTitle",
"content" : "Modal content"
};
})
http://plnkr.co/edit/yKZSnn?p=preview
Chrome 36, Firefox 31, Opera 24 - Same results.
Safari 5.1.7 - Worst results, the overlayer still visible.
的data-trigger焦点不是为我工作...
<span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover>
点击这个元素时,实际上什么也没发生.如果我删除data-trigger='focus'并将其设置为hover或click,它确实有效.
我正在使用angularjs.1.2.18和角带:2.2.4
我使用角带和模态服务.我在使用参数onHide关闭模态时尝试调用函数.
var _modal = $modal({
templateUrl: "app/pages/fee/modals/historic/fee.historic.html",
controller: "HistoricController",
controllerAs: "vm",
keyboard: true,
show: false,
onHide: function() {
console.log("Close !");
},
onShow: function() {
console.log("Open !");
}
});
_modal.$promise.then(_modal.show);
但当我关闭我的模态时没有任何反应,我在控制台中看不到任何日志(关闭或打开).提前感谢任何能够给我一些想法的人!
我正在使用Angular UI Bootstrap popover(http://angular-ui.github.io/bootstrap/#/popover),并且希望指定一个回调函数在打开时执行,另一个函数在它关闭时执行.我的用例是我使用popover来包含数据网格的过滤器.我想在打开时加载一些远程过滤选项,仅在关闭弹出窗口时应用选定的过滤器.
该文档似乎只支持一些基本选项,但没有指示回调支持.我在源代码中也没有看到任何内容.我唯一的选择是设置一个间隔函数来定期检查弹出窗口是否在DOM中可见？
我也在考虑Angular Strap的popover来实现相同的结果,但似乎无法找到在那里设置回调的选项.
我正在使用Angular-Strap来提供我的模态,我遇到了解开模态然后导航到另一个页面的问题.由于某些原因,我只能解除模态,如果我不使用$ location.path并且一旦我添加它然后它解散模态本身并导航到新页面但灰色背景仍然坚持.我一直在寻找回电,但我还没有找到办法一起完成这两项行动.
模态电话
var modal = $modal({
template: '/Product/Delete',
persist: true,
show: false,
backdrop: 'static',
scope: $scope
});
打电话打开模态
$scope.confirmDeleteProduct = function () {
$q.when(modal).then(function (modalEl) {
modalEl.modal('show');
});
};
当他们在模态上点击删除时调用
$scope.deleteProduct = function (id,dismiss) {
//ProductSvc.deleteProduct(id).success(function ($resp) {
dismiss();
//$scope.hideDeleteModal = true;
$location.path('product/');
//});
//$scope.products = _.without($scope.products, product);
};
删除模态
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4>Delete Product</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete the product <strong>{{product.Name}}</strong>?</p>
</div>
<div class="modal-footer">
<button …我正在制作一个幻灯片.所以我用Google搜索并发现了一个纠结的书库.我研究那个图书馆试图制作幻灯片. http://mgcrea.github.io/angular-strap/##asides.我导入了所有必需的js,但是我的侧面板没有像现场那样滑动.我不知道我错在哪里.这是我的代码与plunker. http://plnkr.co/edit/GIFyFSdyJI8tHq5nlBBn?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>
<script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>
<script src="https://dl.dropboxusercontent.com/s/8km0nfoc9noz9ns/modal.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/40vdgl5hglimwfi/aside.js?m="></script>
</head>
<body class="container">
<button type="button" class="btn btn-lg btn-danger" data-template="aside.html" data-placement="left" data-animation="am-slide-left" bs-aside="aside" data-container="body">Custom aside
<br>
<small>(using data-template)</small>
</button>
<script>
var myapp = angular.module('myApp', ['mgcrea.ngStrap','mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside']);
</script>
</body>
</html>
javascript jquery angularjs angularjs-directive angular-strap
我angular-strap用来创建一个导航栏.它会像它应该的那样折叠成汉堡包图标,但是当它折叠时(汉堡包图标)它不会展开以点击链接.这是我的代码:
<nav class="navbar navbar-default" role="navigation" bs-navbar>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
该navbar像预期的响应.此外,directive正在实例化,因为link函数中的断点被击中.如上所述当navbar它hamburger处于状态时,它不会扩展以使其能够点击任何链接.我需要做些什么才能使其成功angular-strap？如何使hamburger图标展开？
我试图根据文档http://mgcrea.github.io/angular-strap/#/popovers#tooltips为AngularStrap做popover和dropdown的延迟
当延迟是一个数字时它起作用.
<button type="button" data-trigger="click" data-placement="right" title="{{title}}" data-content="{{content}}" html="true" data-delay="1000" bs-popover>Click to toggle popover</button>
但是当延迟是对象时它不起作用:
<button type="button" data-trigger="click" data-placement="right" title="{{title}}" data-content="{{content}}" html="true" data-delay="{ show: 500, hide: 100 }" bs-popover>Click to toggle popover</button>
我怎样才能使它有效？
我正在尝试以编程方式创建popover,但面临以下问题.我无法在弹出模板中访问父作用域.预期结果是:
Hello my name is Roman
但我明白了
Hello my name is undefined
这里是plunker
如果我bs-popover在任何元素上使用as属性,那么我得到预期的结果.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<title>Popover issue</title>
</head>
<body>
<div data-ng-app="myApp" data-ng-controller="defaultCtrl" style="margin: 100px 100px">
<button custom-popover ng-click="showPopover()">Popover</button>
<script type="text/ng-template" id="example.html">
<p>My name is {{user.name || 'undefined' }}</p>
</script>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.8/angular-sanitize.min.js" data-semver="1.3.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.5/angular-strap.tpl.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", ['mgcrea.ngStrap', 'ngSanitize']);
app.controller("defaultCtrl", ["$scope", function($scope) {
$scope.user = {
name: "Roman"
};
}]);
app.directive("customPopover", ["$popover", …