Tag: angularjs

Angular指令和Jquery slideToggle函数实现: 使用angular和jquery我实现了slideToggle函数。为了只将这个函数应用于一个特定的HTML元素，我在ng-click函数中使用了一个参数，我的代码工作正常但是，我想知道是否存在另一种更好的方法来实现angular中的指令和ng-click函数：的index.html This is section #1 This is another section #1 This is 3 section #1 styles.css的 .div1 { background: Brown; width: 200px; height: 200px; text-align: center; } .div1 p { position: relative; top: 50%; } directives.js angular.module(“myApp”, []) // .controller(‘MainController’, function($scope) { $scope.toggle = function(section) { console.log(‘ section :’ + section); $scope.section = […]

你如何在angularjs中旋转图像: 嗨，我有一个想要旋转的图像。左右两个按钮可将图像以相反方向旋转45度。我尝试使用jquery旋转库创建一个指令，但它不起作用。救命？ directive.js .directive(‘rotate’, function() { return { restrict:’A’, link: function(scope, element, attrs) { console.log(‘hi’); // watch the degrees attribute, and update the UI when it changes scope.$watch(attrs.degrees, function(rotateDegrees) { console.log(rotateDegrees); //transform the css to rotate based on the new rotateDegrees element.rotate(rotateDegrees); }); } } }）; template.html Rotate Left Rotate Right controller.js $scope.rotate= […]

更改URL时如何更新AngularJS指令？: 可能重复：使用AngularJS设置活动选项卡样式我正在使用AngularJS并尝试在显示该选项卡的内容时向我的菜单添加“当前”类。这是我到目前为止，它在加载页面时工作正常： HTML： One Two JS： myModule.directive(‘highlighttab’, function($location) { var currentPath = “#” + $location.path(); return { restrict: ‘C’, link: function(scope, element, attrs) { var href = element.attr(“href”); if (currentPath == href) { element.addClass(“current”); } } }; }); 当页面url为#/one或/#two时，这会将“当前”类添加到正确的标记问题是如果我单击第二个选项卡，则不会将类添加到该选项卡中。我想我需要一些方法来获取指令中的代码，以便在URL更改时重新运行。有没有办法做到这一点？

在Angularjs中发送的jQuery ajax相当于什么？: 我熟悉Jquery AJAX调用，它有不同的回调，如beforeSend，success，complete等。这是使用Jquery的示例AJAX调用： $.ajax({ url: ‘register.php’, type: ‘POST’, data: {name:name, email:email}, beforeSend: function() { // show loading GIF }, complete: function() { // hide loading GIF }, success: function(data) { // parse response } }); 我想使用AngularJS实现相同的目标。对于AngularJS AJAX请求，是否有像beforeSend之类的回调？到目前为止这是我的代码，但我不知道在哪里可以使用像beforeSend这样的回调（这样我可以在我的代码中显示加载的GIF图像）： $http.post(‘register.php’, {‘name’: $scope.name, ’email’: $scope.email}) .success(function(data, status, headers, config) { if (data != ”) { […]

使用Angular加载部分页面并编译控制器: 在大规模应用程序中，我们的Web应用程序可能会组织成单独的部分页面，以增加应用程序的模块性。在某些情况下，使用Angular $ http.get或JQuery $ .load编译通过XHR或Ajax请求加载的部分页面将引入错误。以我的场景为例，我正在使用Kohana PHP框架，因此我可以在服务器级别上控制我的Web应用程序的模块性。像往常一样，所有模板和页面都被分离到视图中，将所有HTML，JS和CSS放在表示层上。这将为我在客户端处理上实现Javascript MVW / MVC堆栈提供极大的灵活性，因为我的Web应用程序在很大程度上依赖于从后端应用程序获取数据的AJAX请求。在我的场景中，我使用AngularJS和以下是关于如何将模型中的数据呈现给客户端的简单伪。 Kohana模型> Kohana控制器> Kohana查看> XHR> JQuery \ Angular> DOM 我的应用程序中的一部分真的让我碰到并让我喝几瓶新陈代谢饮料来解决应用问题。我在哪里有一个modal dialog，部分页面从服务器通过XHR加载并附加到选定的DOM。问题是当Angular尝试编译部分页面时，当它找到ng-controller指令时，它将查找引用已处理指令的函数。由于DOM解析器尚未评估控制器，因此产生错误。但是，当您在加载部分页面之前在应用程序中的某个位置预先启用该function时，一切正常。下面是我如何设置一个Dialog服务的示例，当我点击上述链接时，该服务将从link指令调用。 var dialogService = angular.module(‘dialog.service’, []); dialogService.factory(‘Dialog’, function($http,$compile){ var dialogService = {}; dialogService.load = function(url, scope){ $(“#dialog:ui-dialog”).dialog( “destroy” ); $(“#dialog”).attr(‘title’,’Atlantis’); $http.get(url).success(function (data) { html = $compile(data)(scope); $(‘#dialog-content’).html(html); […]

动态嵌套对象数组的递归迭代: 我使用角度JS和他们的一个例子： http ： //jsfiddle.net/furf/EJGHX/ 我需要在更新函数发生时获取数据，并在发送到服务器之前为其添加一些值。（如果使用angular而不是js这样做会更好，让我知道）我正试图获得’parentid’和’index’并更新孩子们。这是我正在循环的数据 { “children”: [{ “id”: “5”, “parentid”: “0”, “text”: “Device Guides”, “index”: “1”, “children”: [{ “id”: “10”, “index”: “0”, “text”: “Grandstream GXP-21XX” }, { “id”: “11”, “index”: “1”, “text”: “Polycom Soundstation/Soundpoint” }, { “id”: “23”, “index”: “2”, “text”: “New Polycom” }] }, { “id”: “6”, “parentid”: “0”, “text”: […]

将外部JSON加载到ChartJs中: 我是一个新手，当使用库来绘制JavaScript中的图表/我刚开始尝试使用Chartjs时，我一直无法使用getJson或其他任何东西来加载我的json对象并替换标签和数据。我之前使用过HighCharts，与此相比非常简单。另外，我如何将它放入Angular中的指令并显示它。 https://jsfiddle.net/0u9Lpttx/1/ 的index.html data.json [ { “timestamp”: “Monday”, “original_tweet”: “756”, “retweets”: “345”, “shared”: “34”, “quoted”: “14” }, { “timestamp”: “Tuesday”, “original_tweet”: “756”, “retweets”: “345”, “shared”: “34”, “quoted”: “14” }, { “timestamp”: “Wednesday”, “original_tweet”: “756”, “retweets”: “345”, “shared”: “34”, “quoted”: “14” } ] chartJsControl.js var test = []; $.getJSON(“data.json”, function (json) { test.push(json[i].timestamp); }); […]

jQuery ajax请求有效，同样的AngularJS ajax请求没有: 我正在学习AngularJS并尝试构建从Wordpress获取数据的前端系统。在后端方面，一切似乎都正确设置，当我使用jQuery ajax请求时，它可以毫无问题地获取数据。 jQuery.ajax({ type: ‘POST’, url: ‘/wp-admin/admin-ajax.php’, data: { action: ‘getdataajax’ }, success: function(data, textStatus, XMLHttpRequest){ console.log(data); }, error: function(MLHttpRequest, textStatus, errorThrown){ console.log(errorThrown); } }); 但是当我尝试用AngularJS做同样的事情时，它不起作用。我试图用这样的代码复制ajax请求： myApp.factory(‘productsData’, function($http, $log) { return { getProducts: function(successcb) { return $http({ method: ‘POST’, url: ‘/wp-admin/admin-ajax.php’, data: {action: ‘getdataajax’} }).success(function(data, status, headers, config) { successcb(data); $log.info(data, status, headers(), […]

使用AngularJs禁用文本框的剪切，复制和粘贴function: 我想使用angularJs在textarea中禁用复制粘贴。我试着用ng-paste这样做，如下：控制器： angular.module(‘inputExample’, []) .controller(‘ExampleController’, [‘$scope’, function($scope) { $scope.val = ‘1’; $scope.past = function() { console.log(“d”); $scope.val =” “; } }]); HTML：输入框具有旧数据（初始粘贴数据）。阻止粘贴第二次工作，即如果我将数据粘贴到输入框中，数据将存在，但是在第二次粘贴时数据将不会粘贴，但旧数据值不会被删除。

如何在加载角度JS路由模板时触发事件: 有人知道如何在角度路线渲染视图时触发事件吗？我想路由应用程序，在渲染模板的最后，我希望它触发一个事件来滑动视图“打开”，这样用户体验就不那么苛刻了。当您点击链接时，路线选择如此之快。我基本上想让用户体验更顺畅。点击图片路由应用程序（但视图有一个显示无类的类当视图完成加载然后我想触发一个事件该事件触发一个监听器，使我的标记向下滑动并打开。有任何想法吗？