如何用AngularJS + Angular UI Router制作自动动态面包屑
Web应用程序的一个关键组件是面包库/导航.使用Angular UI路由器,将面包屑元数据放在各个状态而不是在您的控制器中是有意义的.手动为每个控制器创建面包屑对象是一项直接的任务,但它也是一个非常混乱的任务. 我已经看到了一些具有角度的自动面包屑的解决方案,但老实说,它们是相当原始的.有些状态,例如对话框或侧面面板不应更新面包屑,但是将当前的插件变为角,无法表达出来. 另一个问题是面包屑的标题不是静态的.例如,如果您转到用户详细信息页面,则面包屑标题可能应该是用户的全名,而不是通用的"用户详细信息". 需要解决的最后一个问题是使用所有正确的状态参数值用于父链接.例如,如果您正在查看公司的用户详细信息页面,显然您需要知道父状态需要:companyId. 有没有在角度提供这种水平的面包屑支撑的插件?如果不是,那么最好的方法是什么?我不想弄乱我的控制器 - 我会有很多 - 我想让它尽可能地自动化和无痛. 谢谢! 解决方案 我确实自己解决了这个问题,因为什
12 2024-04-03
编程技术问答社区
未捕获对象错误:不能注入ngAnimate
当我尝试注入" nganimate"时,我无法实例化应用程序: var app = angular.module('musicsa', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router', 'firebase', 'ngAnimate' ]) 我从Angular.js Line 78 获得错误Uncaught object 我使用鲍尔安装了nganimate.这是我的bower.json: { "name": "ang-changeorg", "version": "0.0.0", "dependencies": { "angular": "1.2.6", "json3": "~3.2.6", "es5-shim": "~2.1.0", "jquery": "~1.10.2", "bootstrap": "~3.0.3", "
10 2024-04-03
编程技术问答社区
用bower添加ui.bootstrap的依赖性
我试图将UI.bootstrap依赖性添加到我的Angular Project(我使用Yeoman,Bower). 我这样做了: yo Angular Bower安装Angular-UI 然后我添加到我的index.html文件: grunt奉献 然后我将UI.Bootstrap依赖性添加到我的app.js: angular.module('angularuiprojectApp', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ui.bootstrap']) 当我尝试访问我的index.html时,我会遇到此错误: 未接收的错误:[$注射器:Modulerr]无法实例化模块 Angularuiprojectapp归因于:错误:[$注射器:Modulerr]未能 实例化模块UI.bootstrap归因于:错误:[$ inextor:nomod] 模块" ui.bootstra
2 2024-04-03
编程技术问答社区
父子范围与模态的问题:使用angular ui路由器与angular bootstrap模态($uibModal)。
这是我当前的代码: 父级控制器 在 vm.animationsEnabled = true; vm.open = function (size) { var modalInstance = $uibModal.open({ animation: vm.animationsEnabled, templateUrl: 'app/entities/interview-stage/interview-stage-list-add-dialog.html', controller: 'InterviewStageListAddDialogController', controllerAs: 'vm', size: 'cs', }); modalIns
AngularJS $modalInstance-我可以在一个控制器中做到这一点吗?
我花了一些时间与Angularjs Bootstrap弹出窗口一起玩,并且出于意图很棒,但是我想做的就是绑定它,并且它依赖于同一控制器,我可以' t现在是关闭按钮.如果我创建了一个新的控制器,并且注入$ ModalInstance它可以很好地效果,并且我可以将关闭按钮连接起来,而无需任何问题,但是我不想要第二个控制器,它似乎是复杂的:我想要所有的控制器逻辑在formcontroller中. 为什么我真的要两个控制器?通过两个控制器之间的范围似乎对我来说似乎过高了,而且一个项目就会越大,它将变得越无法管理.我是否试图过分简化这一点? :) 脚本: (function(){ var app = angular.module('ngModalDemo', ['ui.bootstrap']) .controller('formController', function($scope, $modal){ $scope.openModal = fu
2 2024-04-02
编程技术问答社区
在点击按钮或调整窗口大小之前,全日历不可见?
我正在使用带有AngularJS和AngularStrap的jQuery完整日历.问题似乎是只有在我单击日历中的一个按钮或调整浏览器窗口大小时,日历才会显示.该日历是使用AngularStrap初始化的模态盒中加载的. 我感谢帮助. plunkr在这里: link Modal HTML在search_modal.html日历控制器中是:calendarctrl.js父级controller is search.js 编辑:在经历了Google Maps和我试图实现的画廊的同样问题之后,我认为这与日历直接相关,而不是与模态盒本身有关的问题.任何交互式和涉及JavaScript的任何内容都无法根据模态框的大小正确缩放.有人对如何解决这个问题有任何想法吗? 解决方案 您的问题似乎与我如何列出两个LinkedIn在Twitter bootstrap下拉中关注按钮 您的模态设置为:
6 2024-04-02
编程技术问答社区
AngularJS将数据传递给bootstrap modal
我认为我缺少一些东西,但无法弄清楚. 基本上,我正在尝试将对象传递到下面的模态,但是我没有得到传递的对象,而是我的零件……所以我认为范围是一个问题,但是我是新手的角度,需要一些帮助. 控制器 app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) { $scope.selected = null; $scope.open = function (item) { $scope.selected = item; $log.info('Open' + $scope.selected); // get right passes object var modalInstance = $uibModal.open({ templateUrl: 'myModalContent.html', controller:
Angular Bootstrap Modal让背景墙开放
我正在使用Angularui在我的Angular 1.4应用程序(例如模态)中整合引导组件. 我在控制器中调用模式: var modalInstance = $modal.open({ animation: true, templateUrl: '/static/templates/support-report-modal.html', controller: 'ModalInstanceCtrl' }); 不幸的是,当我想使用以下方式关闭模态时: modalInstance.close(); 模态本身消失了,背景也逐渐消失,但没有从DOM中删除,因此它覆盖了整个页面,使页面无响应. 当我检查时,我看到了: 在 https://angular-ui.github.io.github.io中的文档中的示例中/bootstrap/#/modal 类modal-open从身体中删除,整个modal-backdrop在关闭时从DOM上删除. 为什
6 2024-04-02
编程技术问答社区
angular bootstrap datepicker获取可见日期(日模式)。
如果模式是一天,我需要从datepicker获得可见的日期. 示例: 在这种情况下,我需要获得这42天.另外,如果用户更改月份,我应该刷新DatePicker Controller视图并获得新的42天. 解决方案 所以我设法解决了这个问题. 我们需要扩展uibdatepickerdiractive angular.module('ui.bootstrap.datepicker') .config(function ($provide) { $provide.decorator('uibDatepickerDirective', function ($delegate, $timeout) { var directive = $delegate[0]; var link = directive.link; angular.extend(directive.scope, { visi
使用Bootstrap 4的Angular UI模态
Bootstrap 3模态正常工作: https://jsfiddle.net/qly7gk3f/4/ 但是Bootstrap 4模式没有: https://jsfiddle.net/qly7gk3f/3/ 代码相同: $scope.click = function() { $uibModal.open({ templateUrl: "modal.html", controller: "modal", scope: $scope }); } 如何使Angularui模式与Bootstrap 4一起使用? 解决方案 我认为这只是添加.in类的一种情况,特别是: .fade.in { opacity: 1; } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -o-transform: translate(0, 0);
6 2024-04-02
编程技术问答社区
Ionic/Cordova应用程序中的认证
首先,我不是专业人士 为了成为一个更好的开发人员,我正在尝试了解需要什么以及如何完成Ionic-Framework应用程序的注册/登录. 大多数单页应用程序(SPA)在节点服务器上处理身份验证,该验证也正在为客户端提供HTML.就我而言,手机本身将为HTML服务,所以我猜我可能会遇到一些CORS问题. 我了解,离子 - 框架使用状态和基于 angular-client-side-auth repo每当我在应用程序中更改状态时,我都应该进行身份验证. 我有一个初始的应用程序设置,但是现在我有点困惑从这里去哪里. 我可以使用的工具: node.js server -thanks digitalocean(我应该将其用作DB的代理吗?) couchdb服务器(完整堆栈我们来了) 我的问题: 使用混合应用程序时进行身份验证的标准方法是什么? 我应该使用node.js作为数据库代理吗? 我应该跳过node.js并直接使用CouchDB服务器进行
2 2024-03-19
编程技术问答社区
javascript不能正确地将angular ui的datepicker日期转换为UTC。
我在项目(ASP.NET Web API + AngularJS)中使用了Angular UI DatePicker.所有操作都很好,但是当我试图将日期保存到db时,它不能正确地将其转换为UTC格式,并在1天子结构(实际上有几个小时,但也会影响一天). 例如,当我在datepicker中选择01/11/2014时: Angularjs object: Sat Nov 01 2014 00:00:00 GMT+0200 (FLE Standard Time) In request: 2014-10-31T22:00:00.000Z In asp.net api controller: {31-Oct-14 10:00:00 PM} datepicker控制器: app.controller('DatepickerCtrl', function ($scope) { $scope.today = function () { $scope.d
6 2024-03-16
编程技术问答社区
当'/'被用于父状态的URL时,URL中会出现两个斜线
更新: 我的假设是错误.我希望URL以相应组合的方式代表路径的组成部分,以通常如何产生最终路径.但是URL只是连接的,仅此而已. 我有以下状态: .state('banksList', { url: '/', ... }) .state('banksList.bank', { url: '/bank/{bankId}', ... }) .state('banksList.bank.branch', { url: '/branch/{branchId}', ... }) 过渡到banksList.bank浏览器显示http://bla-bla//bank/1,基本标签指向http://bla-bla/. 看起来URL只是串联的.我需要启用某种模式还是什么? 解决方案 有 working plunker 为了保持期望工作,您只需使用神奇的标志 ^ 即可.这实际上是对ui-route
4 2024-02-25
编程技术问答社区
angular-ui router-inherited resolved dependencies for NAMED dependencies
根据文档中的示例,儿童状态将继承父状态的解决依赖关系.此外,您可以在通过将钥匙注入儿童州实例化之前解决父母依赖的承诺. 请参阅文档中的示例: $stateProvider.state('parent', { resolve:{ resA: function(){ return {'value': 'A'}; } }, controller: function($scope, resA){ $scope.resA = resA.value; } }) .state('parent.child', { resolve:{ resB: function(resA){ return {'value': resA.value + 'B'}; } },
4 2024-02-25
编程技术问答社区
只重新加载儿童状态
我已经嵌套了UI状态.我只想加载儿童状态而不是父状态. 儿童状态: $stateProvider.state('app.test', { url: '^/test?search', controller: 'TestController', templateUrl: 'test/test.tpl.html', pageTitle: 'Tests', }); 父状态: $stateProvider.state('app', { url: '/app', abstract: true, templateUrl: 'parent/main-content.tpl.html', controller: 'ParentController' }) 当我尝试使用 中仅加载孩子状态时 $state.go('.', {search: searchTerm}); 它仅加载儿童状态. ,当我尝试$
4 2024-02-25
编程技术问答社区
UI-Router,如何获得'状态的名称,以及如何将其发送到带来模板状态的函数。
我从Angular 开始 我想编写一个函数,该功能将带来每个state 的模板 ,就在需要时.作为"懒惰加载"的原则 之后是第一次将其保存在缓存中 我写了这个代码 但是我有错误,我不知道我错了, 有些我在角度不了解的事情,所以我了解我的代码中的问题 这是我的全部代码: var app = angular.module('myApp', ['ui.router']); var getTemplate = function(name) { templates = {pages: 'content of pagesTemplate.html. I very wish !!'}; if (name in templates) { return templates[name]; } $http.get(name + 'Template.html' ).then( function(response){ templa
4 2024-02-25
编程技术问答社区
Angular UI Router解决抛出提供者错误的问题
我似乎对Angular UI路由器有问题,并试图将决心添加到一个状态.很奇怪的是,我在另一个地方效果很好. 我将代码分离为不同的组件区域,我的代码结构就是这样: /app /component-dashboard index.js /controllers DashboardCtrl.js /component-chart-1 index.js /controllers Chart1Ctrl.js 例如,我有根仪表板,这很好: // index.js angular.module('az-ci') .config([ '$stateProvider', function($stateProvider) { $stateProvider .state('dashboard', { templateUrl: '/app/ci-dashboard/templat
6 2024-02-25
编程技术问答社区
ANGULARJS-在主页的h1内显示标题,在网站的其他部分显示div标签。
符合可访问性: 如何在主页上显示 标签的页面标题,而在网站其余部分的 标签中显示. 我正在使用Angular UI-Router,主页的状态为'home'. app.js: magApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise("/404"); // Now set up the states $stateProvider .state('page_404', { templateUrl: 'apps/templates/404.html' }) .state('home', { url: '/', templateUrl: 'apps/templates/home.html', controlle
4 2024-02-25
编程技术问答社区
$state.go不会在确认后改变angular的路线
我有此代码可以使用Angular-UI路由器确认在Angular中导航: $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { //checks if campaign has been modified without save. //if yes state change needs to be confirmed by modal //otherwise simple navigates away event.preventDefault(); // var _this = this; _this.toState = toState; _this.toParams = toParams; var modalIn
8 2024-02-25
编程技术问答社区