我想在AngularJS中使用Bootstrap Multiselect Dropdown http://davidstutz.github.io/bootstrap-multiselect/.我听说有必要将其移至指令.但我认为这很复杂,不知道我该做什么.如果您有经验,请指导我!韩国社交协会.
我在角度js中做了一个指令,限制它作为一个类,这个指令使我的元素可以拖动.
在mousehover上我想做addClass并添加这个应该是类的指令,但这并没有给出想要的结果,我错过了什么？以下是我正在做的事情
module.directive('myDraggable', function ($document) {
var directiveObject= {
restrict:'AC',
//logic of dragging
}
return directiveObject;
});
我试着去做
element.addClass('myDraggable'); // but this fails! pls help
我有一个带有ng-view的应用程序,可以将电子邮件发送给从联系人列表中选择的联系人.当用户选择"收件人"时,它显示另一个可以搜索,过滤等的视图/页面."发送电子邮件"和"联系人列表"是在ng-view中加载的不同html部分.
我需要保持发送表单状态,以便当用户从联系人列表中选择某人时,它返回到同一点(和相同的状态).我读到了不同的解决方案($ rootScope,使用ng-show隐藏的div,...)但我想知道UI路由器是否会帮助我使用它的状态管理器.如果没有,还有其他现成的解决方案吗？
谢谢!
我想添加到ng-grid的链接.这是我的代码供您参考
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="../../Content/ng-grid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/angular.js" type="text/javascript"></script>
<script src="../../Scripts/ng-grid.js" type="text/javascript"></script>
<script src="../../Scripts/main.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "RK.PRABAKAR", age: 25, href: "<a href='#'>Link1</a>" },
{ name: "Yoga", age: 27, href: "<a href='#'>Link1</a>" },
{ name: "James", age: 27, href: "<a href='#'>Link1</a>" },
{ name: "Siva", age: 35, href: "<a href='#'>Link1</a>" …我正在使用angular-ui模态指令http://angular-ui.github.io/bootstrap/.
我已经按照上面的链接示例.
这是我想从控制器发送的数据:
ProductsFactory.getOneProduct().then(function(d){
$scope.selectedProduct = d.data;
});
$scope.open = function () {
var modalInstance = $modal.open({
controller: 'ModalInstanceCtrl',
templateUrl: 'productDetail.html',
resolve: {
items: function () {
return $scope.selectedProduct;
}
}
});
};
这是我的模态控制器:
var ModalInstanceCtrl = function ($scope, $modalInstance, selectedProduct) {
console.log(selectedProduct);
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
问题是我无法访问我的模态控制器中的"选定产品".我知道原因是做宽度异步调用,它只能从GUI访问.但是我该如何解决这个问题呢？如何将"$ scope.selectedProduct"发送到我的ModalInstanceCtrl？
第一次测试ui-router但是此刻测试事件我似乎无法理解如何触发$ viewContentLoaded或Loading.虽然,我有stageChangeSuccess等工作!我把所有内容都推到了http://punkbit.com/space_competition/,但也在这里添加了一些代码.我希望在将新视图加载到ui-view时触发事件.但我想我在这里错过了一些东西!
<div class="pure-g">
<div class="pure-u-1" ui-view>
</div>
</div>
<!-- s: template partials -->
<script type="text/ng-template" id="menu.html">
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li><a href="#/home">home</a></li>
<li class="pure-menu-selected"><a href="#/like_gate">like_gate</a></li>
<li><a href="#/terms_and_conditions">terms_and_conditions</a></li>
<li><a href="#/enter_competition">enter_competition</a></li>
</ul>
</div>
</script>
<script type="text/ng-template" id="home.html">
<p>home.html template! fbLike is {{fbLike}}</p>
</script>
<script type="text/ng-template" id="enter_competition.html">
<p>enter_competition.html template!</p>
</script>
<script type="text/ng-template" id="like_gate.html">
<p>like.html template!</p>
</script>
<script type="text/ng-template" id="terms_and_conditions.html">
<p>terms_and_conditions.html template!</p>
</script>
<!-- e: template partials -->
main.js
angular.module("space_competition", ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: …我正在开发一个已实现UI路由器的ui-sref-active="active"项目,当该项目是当前路由时,它用于将活动类添加到导航菜单项.但是,当您导航到该视图中的嵌套视图时,父菜单项不再处于活动状态.请参阅以下Plunker:
http://plnkr.co/edit/2CoEdS?p=preview
默认情况下(或者如果单击它),路由1处于"活动"状态.当您单击"显示列表"时,您将看到路由1不再处于活动状态.
编辑:
这个例子和我的实际项目之间的唯一区别是我的实际项目中的导航菜单有自己的控制器,所以不使用与"route1"的控制器相同的范围.
我试图使用angular-ui-datepicker作为月份选择器.但是无法配置它,尝试了所有.这是PLUNKER.
我试着将模式设置为
<input type="text" class="form-control col-md-3"
datepicker-popup="MMM-yyyy" min-mode="'month'" datepicker-mode="'month'"
ng-model="dt" is-open="opened" close-on-date-selection="true"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
show-button-bar="false" show-weeks="false"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
并且作为:datepicker-options的一部分,使用JS作为
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1,
'datepicker-mode':"'month'",
'min-mode':"month" };
但这也行不通.请帮忙
我在让旋转木马正常工作方面遇到问题.我用yeomen来支撑角应用程序.我收到了这个错误
Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
at http://localhost:9000/bower_components/angular/angular.js:78:12
at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
at http://localhost:9000/bower_components/angular/angular.js:6913:13
at http://localhost:9000/bower_components/angular/angular.js:8113:11
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
at http://localhost:9000/bower_components/angular/angular.js:11659:26
at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
Error: [$compile:ctreq] Controller 'carousel', required by directive …angularjs yeoman angular-ui angularjs-directive angular-ui-bootstrap
我遇到了这个问题,我不知道如何解决它.我在页面中使用了ui-select multiselect.首先,对获取数据的url进行http.get请求,然后填充ui-select选项.数据很大 - 数据长度为2100.此数据将显示为选项.(数据在加载页面期间在开头提取并存储在数组中)
但问题是每次我点击多选项来选择一个选项,填充列表需要4-5秒,页面变得非常慢.我该怎么做才能减少这段时间？
选择数据存储在数组中,数据类型是字符串数组.
<ui-select multiple ng-model="selectedFields.name" style="width: 100%;">
<ui-select-match placeholder="Select fields...">{{$item}}</ui-select-match>
<ui-select-choices repeat="fields in availableFields | filter:$select.search">
{{fields}}
</ui-select-choices>
</ui-select>
在控制器中,
$scope.selectedFields = {};
$scope.selectedFields.name = [];
$scope.init = function() {
$http.get(url)
.success( function(response, status, headers, config) {
availableFields = response;
})
.error( function(err) {
});
};
$scope.init();
如果不是这样,是否有其他选项/选择我可以使用哪些不会延迟显示选择选项？