使用AngularJs的简单上传器(带CORS实现)。
最近,我不得不使用AngularJS编写一个简单的上载器(可重复使用),而将我的API放在单独的位置,最后使用 blueimp jQuery文件上传器并将其定制为LIL.我认为分享这一点并希望在Angularjs学习方面有所改善可能会很棒. (我添加了答案) 解决方案 app.coffee @angTut = angular.module("angTut", ['LocalStorageModule', 'ngResource', 'uploaderComponent']); @angTut.constant('uploadServiceUrl', 'http://192.168.0.2/api/index.php') todos_uploader_controller.coffee "use strict" @angTut.controller('TodosUploadController', ( $scope, uploadService ) -> $
0 2023-05-29
编程技术问答社区
模板和templateUrl之间的性能差异有多大 Angularjs
模板和templateurl之间有多少性能差异? 目前,我在所有指令中都在使用模板,但是由于我着迷于性能,所以我现在想更快. ,如果我使用templateurl + $ templatecache,这是更快的,然后仅在指令中使用模板? 解决方案 我在另一天问自己您帖子的第一个问题.由于以前没有其他人回答,而且我没有足够的代表发表评论,这是我的发现后进行了一些测试. 第一个问题的最佳答案是,使用 templateurl ,当您致电指令时,您将拥有部分懒惰请求的开销(并且它仅在第一次发生;一次;一次;加载,它将与模板的行为相同.开销是由于浏览器的额外处理以及额外的请求和标头的额外数据. templateurl 只有一次加载大量不同的指令,并且它们都有小文件作为部分(因此,标头的数据少量会产生较小的指令,才会导致较差的用户体验一个很大的区别). 通常差异很低,我个人更喜欢 templateUrl 方法,因为它使代码清洁器更有条理. 其他解决方案 在
0 2023-05-23
编程技术问答社区
Angular.js缓存$编译的模板/ng-repeat内指令的渲染性能
我有一个指令渲染表单元格(请参阅基本上使用link fn link fn angular.js指令模板使用来自父/继承范围的变量),现在在两个ng-repeat s中使用它对于行,一个用于列,所以基本上是 有50行和8列,它对(渲染)性能产生了很大的影响. 所以我一直在寻找一种改善它的方法.首先,我试图摆脱列的内部重复,创建一个内部迭代的my-cols-directive,在列上迭代,找到其模板,创建一个字符串(内部有8列),然后对其进行编译.将编译的数量从400降低到50.但是它在渲染方面并没有明显改善(嗯,但只有15%). 现在,我的另一个想法是将其简化为以某种方式进行编译,基本上是在NG重复的第一次迭代中对其进行编译,然后保存(缓存
0 2023-05-23
编程技术问答社区
用angularjs中的指令替换html中带有星星(*)的文本
我需要一个带有蒙版属性的文本方面的控件,如果文本方面的掩码能够,则文本应以星星而不是实际文本出现. 我可以在我的形式中使用任何文本列表,因此我无法将实际文本保存在其他变量中,并保存实际的Textarea的星星或点. 有人可以帮助我解决这个问题吗? 解决方案 正如其他人已经指出的那样,这是不可能的,不应该做.但是,这是您应该尝试的东西.如果您真的想实现它,则必须在某些方面妥协.使用contenteditable div而不是输入和使用以下CSS: 演示: http://jsfiddle.net/gcu2d/793/ CSS: .checked { font-size:20px; position:relative; display:inline-block; border:1px solid red; } .checked:before { font-size: inherit; content:" ";
0 2023-05-21
编程技术问答社区
AngularJS指令传入字符串
该指令正在尝试创建一个称为Progress Bar的HTML元素,该元素在您将页面移至页面时跟踪进度.我试图将其开发为: 我只是试图将信息从html的^^元素传递给我的指令,然后处理信息以适当地更改进度栏. 这适用于"进度"和" max",它采用整数值,但由于某种原因,该评论的代码将处理"错误"(这是字符串)会导致问题.我是Angularjs的新手,所以很抱歉,这听起来令人困惑或不清楚...请询问我是否需要详细/澄清. app.directive('progressBar', function(){ var compileProgressBar = function(scope, elem, attrs) { var append = '
0 2023-05-19
编程技术问答社区
AngularJS按指令分组,没有外部依赖性
我是Angular的新手,想学习解决问题的最佳方法.我的目标是拥有可重复使用的手段来通过标题创建组.我创建了一个有效的解决方案,但我认为这应该是指令,而不是控制器中的范围函数,但是我不确定如何完成此操作,或者指令是否是正确的方法.任何输入都将不胜感激. 请参阅我当前的方法在 jsfiddle 在html中,这是一个使用ng-repeat的简单列表,我在ng-show上称我的newGrouping()函数.该函数通过对完整列表,我要分组的字段和当前索引的引用. {{item.GroupByFieldName
0 2023-05-18
编程技术问答社区
改变自定义指令的属性
我有自定义指令在Div内加载页面 .directive('page', function () { return { templateUrl: function (elem, attr) { return 'pages/page-' + attr.num + '.html'; } }; }); 这是自定义指令的DOM表示 在这里我想从控制器更改页码. 指令正常工作,如果添加值直接 解决方案 由于您希望在指令内的pageNo内插值值,因此您无法在templateUrl函数中获得该值.您需要使用ng-include指令在指令中获取范围名称的值. 标记 代码 app.directi
0 2023-05-16
编程技术问答社区
将angularjs ng-repeat应用于owl-carousel
在这里查看旋转木马: owl-carousel2 我遇到了一个问题,每当将ng重复指令应用于旋转木马时,物品被垂直堆叠而不是水平布局. 如果我遗漏了ng重复并使用静态项目,则可以按照应有的效果. 是否有我可以编写并申请猫头鹰赛车以维护布局的指令? 另外,导致旋转木马破裂的NG重复是什么? 角度是否以某种方式剥离了旋转木马的猫头鹰类别? 注意*如果手动构
0 2023-05-16
编程技术问答社区
Owl Carousel不能识别ng-repeat的元素
我正在尝试获得 owl carousel 在Angular中工作. 我想在我看来这样标记,因为我有很多画廊: hello 基本上,所有指令都应该做的就是使轮播重要.该指令正常工作,除非我使用NG重复.我猜该指令在处理NG重复之前正在加载. 有人对如何在不构建各种滑块的模板和指令的情况下解决此问题有任何想法吗? 非常感谢! 这是指令: angular.module('dir.owlCarousel', []) .directive('owlCarousel',[function() { return { restrict: 'EA', transclude: fals
2 2023-05-16
编程技术问答社区
如何在Openstreetmap上双击获得坐标?
我正在使用 anguarly-openlayers-directive ,我想获得协调我双击的点. 一个类似的问题: 转换为lat lon ,但我想在Angularjs中使用它. 解决方案 您应该检查此示例: http://tombatossals.github.io/angular-openlayers-directive/examples/080-events-propagation-example.html .它显示了如何找到用于鼠标的纬度坐标.另外,这是我做的一个小提琴,展示了如何将其扩展为双击:defaults: { events: { map: ['singleclick', 'pointermove', 'dblclick'] } } 和 并在范围内包含一个openlayers.map.dblick的听众. $scope.$on(
AngularJS-Image "onload "事件
我一直在寻找简单但不是微不足道的答案:仅使用JQLite捕获Angular中的图像'onload事件的正确方法是什么?我找到了这个问题,但我希望一些解决方案带有指示. 正如我所说,这对我不接受: .controller("MyCtrl", function($scope){ // ... img.onload = function () { // ... } 因为它在控制器中,而不是指令. 解决方案 这是Angular的内置事件处理指令的风格的可重复使用的指令: angular.module('sbLoad', []) .directive('sbLoad', ['$parse', function ($parse) { return { restrict: 'A', link: function (scope, elem, attrs) { var fn = $par
2 2023-05-08
编程技术问答社区
如何在控制器和指令之间共享服务动态数据
我想知道使用哪种模式,如果我需要服务在控制器,指令等之间共享其动态数据.我提到动态的原因是因为我想加载新数据和此数据例如,需要在任何其他控制器,指令等中使用. 我最初打开这个问题有人建议我应该使用观察者模式.我写了var MyApp = angular.module('MyApp', []); MyApp.config(function($locationProvider){ $locationProvider.hashPrefix('!'); }); MyApp.factory('MyService', function($timeout){ var data; var loadData = function(){ data = { foo: "bar", time: new Date() }; return data; }; return { refresh: function(){ loadData(); }, getData: function(){ return loadDa
如何在angular js中存储和检索数据?
您能告诉我如何在本地存储数据并检索数据.我想存储数据以使我再次获得数据.我正在进行客户端编程吗?我在Google上说有持久性. 这是我的plunker: > // Code goes here var app = angular.module('appstart', ['ngRoute']); app.config(function($routeProvider) { // $locationProvider.html5Mode(true); $routeProvider .when('/home', { templateUrl: 'tem.html', controller: 'ctrl' }) .otherwise({ redirectTo: '/home' }); }); app.controlle
2 2023-04-27
编程技术问答社区
使用Bootstrap和Angularjs动态地创建嵌套的导航菜单项
我想实现的目标是在使用angularjs的JSON中动态创建Bootstrap中的菜单. JSON看起来像这样: { "Page A":"page_A.html", "Page B":{ "Page B1":"page_B/page_B1.html", "Page B2":"page_B/page_B2.html", "Page B3":{ "Page B3-a":"page_B/page_B3/page_a.html", "Page B3-b":"page_B/page_B3/page_b.html" } }, "Page C":"page_C.html" } 其中对象键是页面的名称,而对象值是物理文件位置. Angular App.js看起来像 app.controller('navCtrl', function
2 2023-04-20
编程技术问答社区
AngularJs,改变用户是否连接的菜单项
我是Angularjs的新手,我尝试处理用户身份验证. 我确保未连接的用户无法访问限制路线: app.js .config(function ($routeProvider) { $routeProvider .when('/myroute', { templateUrl: 'views/myroute.html', controller: 'MyrouteCtrl', access: { isFreeAccess: false } }) ... .run( function ($rootScope, $location, Auth) { $rootScope.$on('$routeChangeStart', function(currRoute, prevRoute){ if
0 2023-04-20
编程技术问答社区
如何用Angular JS设置bootstrap导航条活动类?
如果我在bootstrap中有一个带有项目 的Navbar Home | About | Contact 当它们处于活动状态时,如何为每个菜单项设置活动类?也就是说,当角路线处于 时,我该如何设置class="active" #/为家庭 #/about对于大约页面 #/contact有关联系页面 解决方案 一种非常优雅的方法是使用ng-controller在NG-View外运行单个控制器: Home
2 2023-04-20
编程技术问答社区
具有插值的ng-style不能渲染背景图片?
我正在尝试使用Angular NG式更改DIV的背景图像. 这是我的代码. 但是,当我运行项目时,未显示图像,而是图像的URL已更改为'localhost:' 检查元素显示了这一点, CSS .cover-image { height:100px; width:100%; display: block; } 为什么?我怎样才能解决这个问题?谢谢 解决方案 我相信ng
8 2023-04-12
编程技术问答社区