Questions tagged «angularjs»

用于有关开源JavaScript框架AngularJS（1.x）的问题。不要将此标签用于Angular 2或更高版本；而是使用[angular]标签。

8
ng模型，ng重复和输入的难度
我正在尝试允许用户使用ngRepeat和编辑项目列表ngModel。（请参阅此小提琴。）但是，我尝试过的两种方法都导致了奇怪的行为：一种方法没有更新模型，另一种方法使每个keydown的表单模糊。 我在这里做错什么了吗？这不是受支持的用例吗？ 这是小提琴中的代码，为方便起见进行了复制： <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be working: the value in the …
13
AngularJS-$ http.post是否可以发送请求参数而不是JSON？
我有一些旧代码通过jQuery的post方法发出AJAX POST请求，看起来像这样： $.post("/foo/bar", requestData, function(responseData) { //do stuff with response } requestData 只是具有一些基本字符串属性的javascript对象。 我正在移动我们的内容以使用Angular，并且我想用$ http.post代替此调用。我提出以下内容： $http.post("/foo/bar", requestData).success( function(responseData) { //do stuff with response } }); 当我这样做时，我从服务器收到500错误响应。使用Firebug，我发现这发送了如下请求体： {"param1":"value1","param2":"value2","param3":"value3"} 成功的jQuery $.post发送如下内容： param1=value1&param2=value2&param3=value3 我要命中的端点期望请求参数而不是JSON。因此，我的问题是无论如何要告诉$http.post发送JavaScript对象作为请求参数而不是JSON？是的，我知道我可以自己从对象构造字符串，但是我想知道Angular是否为此提供了开箱即用的功能。
7
ui-router $ stateParams与$ state.params
使用ui-router，可以将$state或$stateParams注入控制器中，以访问URL中的参数。但是，$stateParams仅通过访问参数会公开属于访问它的控制器管理的状态的参数及其父状态，而$state.params具有所有参数，包括处于任何子状态的参数。 给定以下代码，如果我们直接加载URL http://path/1/paramA/paramB，则这是控制器加载时的样子： $stateProvider.state('a', { url: 'path/:id/:anotherParam/', controller: 'ACtrl', }); $stateProvider.state('a.b', { url: '/:yetAnotherParam', controller: 'ABCtrl', }); module.controller('ACtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id and anotherParam } module.controller('ABCtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id, …
5
如何将多个属性传递给Angular.js属性指令？
我有一个属性指令，其限制如下： restrict: "A" 我需要传递两个属性；一个数字和一个函数/回调，使用attrs对象在指令中访问它们。 如果指令是元素指令，那么"E"我可以限制为： <example-directive example-number="99" example-function="exampleCallback()"> 但是，出于某种原因，我不再赘述，我需要将该指令作为属性指令。 如何将多个属性传递到属性指令中？
5
如何使用基于JWT的身份验证处理文件下载？
我正在Angular中编写一个webapp，其中身份验证是通过JWT令牌处理的，这意味着每个请求都带有一个“ Authentication”标头，其中包含所有必要的信息。 这对于REST调用非常有效，但是我不明白如何处理后端托管的文件的下载链接（这些文件位于托管Web服务的同一服务器上）。 我不能使用常规<a href='...'/>链接，因为它们将不带有任何标题，并且身份验证将失败。同样的咒语window.open(...)。 我想到的一些解决方案： 在服务器上生成一个临时的不安全的下载链接 将身份验证信息作为url参数传递并手动处理情况 通过XHR获取数据并保存文件客户端。 以上所有都不令人满意。 1是我现在正在使用的解决方案。我不喜欢它有两个原因：首先，它不是理想的安全方式；其次，它可以工作，但是特别是在服务器上，它需要进行大量工作：要下载某些东西，我需要调用一个生成新的“随机”服务的服务网址，将其存储在某个位置（可能在数据库上）一段时间，然后将其返回给客户端。客户端获取url，并使用window.open或类似的名称。当请求时，新的url应该检查它是否仍然有效，然后返回数据。 2似乎至少要完成同样的工作。 3即使使用可用的库也似乎需要大量工作，并且存在许多潜在问题。（我需要提供自己的下载状态栏，将整个文件加载到内存中，然后要求用户将文件保存在本地）。 但是，该任务似乎是一项非常基本的任务，因此我想知道是否可以使用更简单的方法。 我不一定要寻找“角度方式”的解决方案。普通的Javascript就可以了。
6
dom完成渲染后如何运行指令？
我有一个看似简单的问题，没有明显的解决方案（通过阅读Angular JS文档）。 我有一个Angular JS指令，该指令根据其他DOM元素的高度进行一些计算，以定义DOM中容器的高度。 指令内部发生了类似的事情： return function(scope, element, attrs) { $('.main').height( $('.site-header').height() - $('.site-footer').height() ); } 问题是当指令运行时，$('site-header')找不到它，返回一个空数组而不是我需要的jQuery包装的DOM元素。 我是否可以在指令中使用仅在加载DOM之后才能运行的回调，并且可以通过常规jQuery选择器样式查询访问其他DOM元素？
7
AngularJS的模块声明最佳实践？
我的应用程序中声明了一堆Angular模块。我最初开始使用“链式”语法声明它们，如下所示： angular.module('mymodule', []) .controller('myctrl', ['dep1', function(dep1){ ... }]) .service('myservice', ['dep2', function(dep2){ ... }]) ... // more here 但是我认为这不太容易阅读，所以我开始使用如下模块变量来声明它们： var mod = angular.module('mymodule', []); mod.controller('myctrl', ['dep1', function(dep1){ ... }]); mod.service('myservice', ['dep2', function(dep2){ ... }]); ... 第二种语法对我来说似乎更具可读性，但是我唯一的抱怨是该语法将mod变量保留在全局范围之外。如果我有其他名为的变量mod，那么下一个变量（以及与全局变量相关的其他问题）将覆盖它。 所以我的问题是，这是最好的方法吗？还是做这样的事会更好？ (function(){ var mod = angular.module('mymod', []); mod.controller('myctrl', ['dep1', function(dep1){ ... }]); mod.service('myservice', ['dep2', function(dep2){ …
115 angularjs 
6
如何使ng-click事件成为条件？
我在ng-repeat中有以下代码： <a href="#" class="disabled" ng-click="doSomething(object)">Do something</a> 如何使按钮处于禁用状态class="disabled"？ 或者有没有一种方法可以用Javascript来完成，因此如下所示： $('.do-something-button').click(function(){ if (!$(this).hasClass('disabled')) { do something } });
7
AngularJS-$ anchorScroll平滑/持续时间
阅读AngularJS文档，我还没有弄清楚是否$anchorScroll可以使用持续时间/缓动选项来平滑滚动到元素。 它只说： $location.hash('bottom'); // call $anchorScroll() $anchorScroll(); 我不使用jQuery，也不想这样做。还有一种聪明而简单的方法$anchorScroll可以使滚动更平滑吗？
7
在Angular中，我需要搜索数组中的对象
在Angular中，我在范围内有一个对象，该对象返回许多对象。每个都有一个ID（此ID存储在一个平面文件中，所以没有DB，而且我似乎无法使用ng-resource） 在我的控制器中： $scope.fish = [ {category:'freshwater', id:'1', name: 'trout', more:'false'}, {category:'freshwater', id:'2', name:'bass', more:'false'} ]; 在我看来，我还有关于默认隐藏的鱼类的ng-show更多其他信息，但是当我单击简单的显示更多标签时，我想调用该函数showdetails(fish.fish_id)。我的函数看起来像： $scope.showdetails = function(fish_id) { var fish = $scope.fish.get({id: fish_id}); fish.more = true; } 现在，在视图中将显示更多详细信息。但是，在搜索了文档之后，我无法弄清楚如何搜索该fish数组。 那么如何查询数组？在控制台中如何调用调试器，以便可以使用$scope对象？
10
当选定的ng-option更改时获取价值
我在.html页面中有一个下拉列表， 落下： <select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"> <option value="">Select Account</option> </select> 当用户选择一个值时，我想执行一个动作。因此，在我的控制器中，我做到了： 控制器： $scope.$watch('blisterPackTemplateSelected', function() { alert('changed'); console.log($scope.blisterPackTemplateSelected); }); 但是更改下拉列表中的值不会触发代码： $scope.$watch('blisterPackTemplateSelected', function() 结果，我ng_change = 'changedValue()'在select标记上尝试了另一个带有：的方法 和 功能： $scope.changedValue = function() { console.log($scope.blisterPackTemplateSelected); } 但是blisterPackTemplateSelected会存储到子作用域中。我读到父级无法访问子级作用域。 当下拉列表中的选定值更改时，执行某项操作的正确/最佳方法是什么？如果是方法1，我的代码在做什么错？
3
如何将json加载到我的angular.js ng模型中？
我有一个我认为可能是非常明显的问题，但是我在任何地方都找不到答案。 我只是想将一些JSON数据从服务器加载到客户端。现在，我正在使用JQuery通过AJAX调用（下面的代码）加载它。 <script type="text/javascript"> var global = new Array(); $.ajax({ url: "/json", success: function(reports){ global = reports; return global; } }); </script> 这位于html文件中。到目前为止，它仍然有效，但问题是我想使用AngularJS。现在，虽然Angular CAN使用变量，但是我无法将整个内容加载到变量中，因此我可以为每个循环使用a。这似乎与通常位于.js文件中的“ $ Scope”有关。 问题是我无法将其他页面的代码加载到.js文件中。每个Angular示例仅显示如下内容： function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; 因此，如果IA）想要手动输入所有内容，并且B）如果我事先知道我的所有数据是什么，那么这将非常有用。 我事先不知道（数据是动态的），所以我不想键入它。 因此，当我尝试使用$ Resource将AJAX调用更改为Angular时，它似乎不起作用。也许我无法弄清楚，但这是一个相对简单的JSON数据GET请求。 tl：dr我无法使AJAX调用工作以将外部数据加载到角度模型中。
7
将模拟注入AngularJS服务
我写了一个AngularJS服务，我想对其进行单元测试。 angular.module('myServiceProvider', ['fooServiceProvider', 'barServiceProvider']). factory('myService', function ($http, fooService, barService) { this.something = function() { // Do something with the injected services }; return this; }); 我的app.js文件已注册： angular .module('myApp', ['fooServiceProvider','barServiceProvider','myServiceProvider'] ) 我可以测试DI是否像这样工作： describe("Using the DI framework", function() { beforeEach(module('fooServiceProvider')); beforeEach(module('barServiceProvider')); beforeEach(module('myServiceProvder')); var service; beforeEach(inject(function(fooService, barService, myService) { service=myService; })); it("can be …
5
扩展角度指令
我想对第3方指令（特别是Angular UI Bootstrap）进行较小的修改。我只是想添加pane指令的范围： angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { // various methods }]) .directive('tabs', function() { return { // etc... }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@', disabled:'@' // <- ADDED SCOPE PROPERTY HERE }, link: function(scope, element, attrs, …
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.