标签: angular-ui
angularjs ui-router:未知提供者:$ stateProvider
我在使用AngularJS的ui-router插件时遇到了麻烦:
angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
然后我在启动时收到此错误:
Unknown provider: $stateProvider
我按此顺序包含了javascripts:
<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>
可能是什么问题 ？
[编辑]
我通过添加'ui.compat'作为myApp的依赖项来摆脱错误消息.我在ui-router的示例代码中看到了这一点,但在文档中没有.这是关于什么的？
尽管如此,它仍然无效.我已将ui-view添加到应用程序索引文件中的div.但页面仍然是空白的.
18
推荐指数
推荐指数
2
解决办法
解决办法
4万
查看次数
查看次数
如何隐藏ng网格中的列
这是我的代码:
的index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: …18
推荐指数
推荐指数
4
解决办法
解决办法
5万
查看次数
查看次数
AngularUI-Bootstrap的Typeahead无法读取`undefined`的`length`属性
当我尝试使用promise从AngularUI-Bootstrap获取一个typeahead值时,我收到以下错误.
TypeError: Cannot read property 'length' of undefined
at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982
at i (http://localhost:8000/static/js/angular.min.js:79:437)
at i (http://localhost:8000/static/js/angular.min.js:79:437)
at http://localhost:8000/static/js/angular.min.js:80:485
at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272)
at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142)
at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431)
at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156)
at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129)
at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866)
我的HTML标记是:
<input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)">
我的getTypeaheadValues功能执行以下操作:
$scope.getTypeaheadValues = function($viewValue)
{
// return ['1','2','3','4'];
$http({
method: 'GET',
url: 'api/v1/person?name__icontains=' + $viewValue
}).error(function ($data) {
console.log("failed to fetch typeahead data");
}).success(function ($data) {
var output = [];
$data.objects.forEach(function …18
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
为什么$ routeChangeSuccess永远不会被调用？
我在我的应用程序上做了类似于下面的操作,但我无法获得routeChangeSuccess事件.
var myapp = angular.module('myapp', ["ui.router", "ngRoute"]);
myapp.controller("home.RootController",
function($rootScope, $scope, $location, $route) {
$scope.menus = [{ 'name': 'Home ', 'link': '#/home'}, {'name': 'services', 'link': '#/services'} ]
$scope.$on('$routeChangeSuccess', function(event, current) {
alert('route changed');
});
}
);
myapp.config(
function($stateProvider, $urlRouterProvider, $routeProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
//template: '<h1>Home Screen</h1>'
templateUrl: "/Client/Views/Home/Home.htm"
})
.state('services', {
url: "/services",
//template: '<h1>Service screen</h1>'
templateUrl: "/Client/Views/Home/service.htm"
});
});
一个非常简单的HTML如下所示也失败了
<body ng-controller="home.RootController">
<ul class="nav">
<li ng-repeat="menu in menus" "="">
<a href="{{menu.link}}">{{menu.name}}</a>
</li>
</ul>
<div ui-view> No …18
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数
Angular UI路由器 - 在父级中访问状态参数
我有一个使用伟大的ui路由器的Angular应用程序.
我的设置如下:
.config( function ($stateProvider, $urlRouterProvider) {
$stateProvider
// PROJECT DETAIL
.state('project', {
url: '/project/:projectId/',
resolve: {
/* some base api calls */
},
views: {
'task-list': {
templateUrl: 'partials/task_list.tmpl.html',
controller: 'TaskListCtrl',
resolve: {
tasks: function ($stateParams, ConcernService) {
return ConcernService.get('project-tasks/', $stateParams.projectId);
},
}
},
'concern-instance': {
/* some resolved variables */
}
}
})
.state('project.task', {
url: 'task/:taskId/',
views: {
'concern-instance@': {
/* some different resolved variables */
},
}
})
这一切都像黄油一样.然而,在我的task_list模板时,状态project.task,我希望能够访问taskIdPARAM,所以我可以强调积极的导航链接,即使网址为#/project/123/task/456/ …
18
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
Angular-UI $对话框和表单在回车键上提交
从我所看到的,在AngularJS中处理对话框中的输入键的推荐方法是在对话框中放置一个<form>标签和一个提交按钮.
很公平,但如果您使用Angular-UI及其$ dialog服务,则在按Enter键时,表单将以静默方式关闭.没办法拦截那个.即使您将处理程序附加到ng-click或ng-submit,表单也会关闭而不返回任何结果.
我还需要做些什么
[编辑]
解决了它,我必须明确指出我的"取消"按钮是"按钮"类型.好像它默认为"提交"？
所以除了我的html表单技巧之外没有真正的问题:)
17
推荐指数
推荐指数
1
解决办法
解决办法
7350
查看次数
查看次数
Angular ui-select只过滤一个字段
情况:
我有一个角度应用程序使用角度ui-select来搜索和选择数据库中的人.
除了一件事,它工作得很好.用户应该能够使用两个标准在人员之间进行过滤:姓名和电子邮件.
使用普通角度滤波器,我只能过滤其中一个.如果我尝试过滤这两个字段,它就不再起作用了.
具有一个字段的工作示例:
<ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">
<ui-select-match placeholder="Select person...">{{$item.name}} < {{$item.email}} ></ui-select-match>
<ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, db_data_type_id: 5}">
<div ng-bind-html="person2.name | highlight: $select.search"></div>
<small>
email: <span ng-bind-html="''+person2.email | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
在过滤器中没有两个字段的工作示例:
<ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">
<ui-select-match placeholder="Select person...">{{$item.name}} < {{$item.email}} ></ui-select-match>
<ui-select-choices repeat="person2 in list_people | filter: {name: $select.search, email: $select.search, db_data_type_id: 5}">
<div ng-bind-html="person2.name | highlight: $select.search"></div>
<small>
email: <span ng-bind-html="''+person2.email | highlight: …17
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
我怎样才能让它只是一个空状态或ui-sortable show的drop target占位符？
我有两个连接的ui可排序列表.当其中一个列表为空时,我需要显示一条消息; 当拖动时悬停该空列表时,我需要显示一个样式化的放置目标并隐藏空列表消息.我能够编写绝大多数代码,这里有一个简化的Codepen工作.
问题在于,当您从填充列表中拖动空列表然后再次移出时,空列表会显示空列表占位符和样式化放置目标.这是一个截屏:
问题的根源似乎在于我计算sortableList指令的列表是否为空:
scope.isEmpty = function() {
if (!scope.attachments) {
return true;
} else if (scope.dragDirection === 'drag-out' && !scope.hovered) {
return scope.attachments.length <= 1;
} else if (scope.hovered) {
return false;
} else {
return scope.attachments.length === 0;
}
};
请注意,我正在跟踪范围上的状态并使用$ apply来确保DOM更新如下:
function onDragStart() {
scope.$apply(function() {
scope.dragDirection = 'drag-out';
});
}
function onDragStop() {
scope.$apply(function() {
scope.dragDirection = '';
});
}
function onDragOver() {
scope.$apply(function() {
scope.hovered = true;
});
}
function onDragOut() {
scope.$apply(function() { …17
推荐指数
推荐指数
1
解决办法
解决办法
975
查看次数
查看次数
在Directive运行之前,AngularJS通过AJAX检索数据
我正在使用AngularUI的uiMap指令来实例化谷歌地图.uiMap指令适用于硬编码数据({mapOptions}和[myMarkers]); 但是当我通过$http.get()(在AJAX调用完成之前指令触发)检索此数据时遇到了麻烦.
最初我在我的GoogleMaps控制器中执行GET ,但是当我意识到事情发生的时候,我把GET转移到了uiMap指令中.我有两个问题:
- 我认为这不是正确的方法.
- GET还检索数据
[myMarkers]- 创建标记的函数/指令无处不在,因为它负责创建所有叠加层
所以我的问题是,是否在应用程序的其他地方我可以在指令运行之前检索数据(并将其应用于范围)？
我读了$ q,这听起来像我想要的,但我不确定我是否可以在我的控制器中而不是在指令中做到(也不确定$q.defer.resolve()有什么不同$http.success()).
编辑我使用的大部分代码都是从AngularUI的doc中复制/粘贴,但这里有一个插件:http://plnkr.co/edit/t2Nq57
解
<!-- index.html -->
<div
id="map_container"
ng-controller="GoogleMaps">
<div ui-if="mapReady">
<div
ng-repeat="marker in markers"
ui-map-marker="markers[$index]"
ui-event="{'map-click':'openMarkerInfo(marker)'}"
></div>
<div
ui-map-info-window="myInfoWindow"
ng-include="'infobox.html'"
></div>
<div
id="map_canvas"
ui-map="myMap"
ui-options="mapOptions"
></div>
</div>
</div>
警告1 uiIf不能在指定控制器提供其条件的同一元素中(uiIf具有比ngController更高的优先级,因此在uiIf执行之前它的控制器不会被设置).
警告2请务必使用最新版本的uiIf(最新标签v0.3.2中提供的版本已过期).在某些情况下,旧的错误导致TypeError.
必须在AngularJS之前包含警告3 jQuery(在index.html中); 否则你会收到一个TypeError声明Object [object Object] has …
16
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
Angular-UI模态解析
亲爱的我是Angularjs的新手我正在用Angular创建一个模态.我在网上找到的一个例子就是我很难理解
$scope.checkout = function (cartObj) {
var modalInstance = $modal.open({
templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
}],
resolve : { // This fires up before controller loads and templates rendered
cartObj : function() {
return cartObj;
}
}
});
令我困惑的是cartObj,我已经收到的作为我的函数的参数通过依赖注入传递给我的控制器.但是为什么我必须创建一个名为cartObj的函数并返回该变量.这似乎令人困惑.有人可以帮忙吗？
16
推荐指数
推荐指数
1
解决办法
解决办法
3万
查看次数
查看次数