Questions tagged «angularjs»

我正在尝试通过将Post发送到php文件来提供简单的身份验证服务，ng-view当成功时，我需要它来加载主页的部分内容。 这是我尝试的： function loginCtrl($scope, $http, $location){ $http.post(url,data).success(function(data){ $location.path('/home'); }); } 结果我的网址发生了变化，但ng-view没有更新。当我手动刷新页面时，它会更新。 （路由已在处进行了正确配置$routeProvider，我已经测试了使用独立功能（而不是作为回调）将其重定向，并且可以正常工作） 我也尝试过定义$location.path('/home')为一个函数，然后在回调中调用它仍然不起作用。 我进行了一些研究，发现一些文章指出使用其他第三方插件时会发生这种情况，我仅加载angular.js 任何对某些学习材料的见解或指导都是很棒的

72 javascript  model-view-controller  angularjs 

angular.isdefined超越的好处是什么foo === undefined？ 我不能马上想到好处。

72 javascript  angularjs 

我发现Angular对模型的使用令人困惑。Angular似乎采用了模型可以随心所欲的方法-IE Angular不包括显式的模型类，您可以将原始JavaScript对象用作模型。 在我所见过的几乎每个Angular示例中，模型实际上都是手动创建的对象，或者是通过Resource通过API调用返回的对象。因为我看过的几乎每个Angular示例都很简单，所以通常将模型数据存储在$ scope中的控制器中，并且与模型相关的任何状态（例如选择）也都存储在控制器中的$ scope中。这对于简单的应用程序/示例来说效果很好，但是当应用程序变得更加复杂时，这似乎过于简化了。例如，如果上下文发生更改，则存储在控制器中的模型状态可能会变得上下文相关并丢失。A控制器存储selectedGallery和selectedPhoto只能存储全局selectedImage，而不是selectedPhoto每个画廊。在这种情况下，每个画廊使用一个控制器可能会解决此问题，但从UI角度看似乎很浪费，而且可能是不合适和不必要的。 Angular对模型的定义似乎更接近我认为的VO / DTO，它是在服务器和客户端之间传递的一个愚蠢的对象。我的直觉是将这样的对象包装在我认为的模型中-一种类，该类维护与DTO / VO相关的状态（例如选择），根据需要提供变体来操纵DTO / VO，并通知其余对象对基础数据进行更改的应用。显然，Angular的绑定很好地照顾了最后一部分，但是我仍然看到前两个职责的强大用例。 但是，我在所查看的示例中并未真正看到过这种模式，但是我也没有看到我认为可伸缩的替代方案。Angular似乎通过强制使用Singletons隐式地不鼓励将Services用作模型（我知道有解决此问题的方法，但它们似乎并未得到广泛使用或认可）。 那么我应该如何保持模型数据的状态呢？ [编辑]这个问题的第二个答案很有趣，接近我目前正在使用的答案。

72 javascript  model  angularjs  state 

我在将控制器中定义的函数与指令中的回调函数绑定时遇到一些麻烦。我的代码如下所示： 在我的控制器中： $scope.handleDrop = function ( elementId, file ) { console.log( 'handleDrop called' ); } 然后我的指令： .directive( 'myDirective', function () { return { scope: { onDrop: '&' }, link: function(scope, elem, attrs) { var myFile, elemId = [...] scope.onDrop(elemId, myFile); } } ); 在我的html页面中： <my-directive on-drop="handleDrop"></my-directive> 上面的代码没有运气。根据我在各种教程中所读的内容，我知道我应该在HTML页面中指定参数？

72 angularjs  angularjs-directive 

我试图建立一个myApp.config模块来存储我的应用程序的一些设置，我写了一个config.js文件： angular.module('myApp.config', []) .constant('APP_NAME','My Angular App!') .constant('APP_VERSION','0.3'); 我将其添加到我的app.js（角种子）中： angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.config']). 我将其添加到index.html文件，现在我试图弄清楚如何在控制器中获取它，我尝试了： angular.module('myApp.controllers', ['myApp.config']) .controller('ListCtrl', ['$scope', 'myApp.config', function($scope, $config) { $scope.printme = $config; }]) 但我得到： 未知提供者：myApp.configProvider <-m​​yApp.config 我在这里做错什么了，有什么主意吗？

72 javascript  angularjs 

我想使用Angular将模型数据表示为不同的图像，但是在寻找“正确”的方法时遇到了一些麻烦。表达式的Angular API文档说不允许使用条件表达式... 简化很多，通过AJAX提取模型数据，并向您显示路由器上每个接口的状态。就像是： $scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"] 因此，在Angular中，我们可以使用以下内容显示每个接口的状态： <ul> <li ng-repeat=interface in interfaces>{{interface}} </ul> 但是-我想显示一个合适的图像，而不是模型中的值。遵循这个基本思想的东西。 <ul> <li ng-repeat=interface in interfaces> {{if interface=="UP"}} <img src='green-checkmark.png'> {{else}} <img src='big-black-X.png'> {{/if}} </ul> （我认为Ember支持这种类型的构造） 当然，我可以修改控制器以根据实际的模型数据返回图像URL，但这似乎违反了模型和视图的分离，不是吗？ 这样发布建议使用伪指令来更改bg-img源。但是，然后我们回到将URL放入JS而不是模板中的方式... 所有建议表示赞赏。谢谢。 请原谅任何错别字

72 angularjs 

我有一个简单的删除按钮，它将接受字符串或数字，但不接受ng-model变量（不确定这是否是正确的术语）。 <button class="btn btn-danger" ng-click="delete('{{submission.id}}')">delete</button> 产生： <button class="btn btn-danger" ng-click="delete('503a9742d6df30dd77000001')">delete</button> 但是，单击时什么也没有发生。如果我对变量进行硬编码，那么它就可以正常工作。我以为我不是在以“角度”方式做事，但是我不确定那是什么方式:) 这是我的控制器代码： $scope.delete = function ( id ) { alert( 'delete ' + id ); }

72 javascript  angularjs 

在不使用服务或在父控制器中构造观察程序的情况下，如何使子状态访问主控制器的$scope。 .state("main", { controller:'mainController', url:"/main", templateUrl: "main_init.html" }) .state("main.1", { controller:'mainController', parent: 'main', url:"/1", templateUrl: 'form_1.html' }) .state("main.2", { controller:'mainController', parent: 'main', url: "/2", templateUrl: 'form_2.html' }) 我无法在子状态下访问mainController范围-或者我正在获取该范围的另一个实例-不是我想要的。我觉得我缺少一些简单的东西。在状态对象中有一个共享的数据配置选项，但是我不确定是否应该将其用于这样的事情。

71 javascript  angularjs  angularjs-scope  angular-ui-router 

我正在使用Angular和Twitter Bootstrap导航栏，并尝试使折叠功能正常工作。 部分：program.html <div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div> 部分：navbar.html <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Short Course</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li class="dropdown ng-class: settingsActive;"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Intro <b class="caret"></b></a> …

71 twitter-bootstrap  angularjs 

我想将替代类分配给表中的行。我在上使用ng-repeat <tr ng-repeat="event in events"> 我想要这样的输出： <tr class="odd">...</tr> <tr class="event">....</tr> 我已经试过了（无效）： <tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'"> 我无法正常工作。似乎Angular也在使用'class'属性。为什么这样做呢？我可以告诉AngularJS不要将class属性用于内部评估吗？ 请帮忙。谢谢！

71 javascript  angularjs 

如何使用AngularJS渲染动态定义列表？ 例： 数据： [ { key: 'a', value: 'x' }, { key: 'b', value: 'y' } ] 所需的HTML： <dl> <dt>a</dt> <dd>x</dd> <dt>b</dt> <dd>y</dd> </dl> http://docs.angularjs.org/tutorial/step_08上的示例： <dl> <dt>Availability</dt> <dd ng-repeat="availability in phone.availability">{{availability}}</dd> </dl> 适用于动态数的dds和静态数的dts，但不适用于两者的动态数。

71 angularjs 

我正在尝试在将其他模块作为依赖项的模块中进行单元测试控制器代码的单元化，但是还无法弄清楚如何正确模拟它们。 我正在使用Jasmine Framework，并使用Karma（Testacular）运行测试。 模块代码 var app = angular.module('events', ['af.widgets', 'angular-table']); app.controller('eventsCtrl', function([dependencies]){ $scope.events = []; ... }); 规格代码 describe('events module', function(){ var $scope, ctrl; beforeEach(function(){ angular.mock.module('af.widgets', []); angular.mock.module('angular-table', []); module('events', ['af.widgets', 'angular-table']); }); beforeEach(inject(function($rootScope, $controller){ $scope = $rootScope.new(); ctrl = $controller('NameCtrl', { $scope: $scope, }); })); it('should have an empty …

71 unit-testing  angularjs  jasmine  karma-runner 

创建配置文件（类似于.net中的Web配置），存储URL以及在应用程序部署期间可能会变化的其他常量的最佳方法是什么？

71 angularjs 

带有用于Auth /（re）路由的API的Angular + RESTful客户端通信 这在几个不同的问题和一些不同的教程中都有介绍，但是我所遇到的所有以前的资源并没有完全解决问题。 简而言之，我需要 通过POST从登录http://client.foo到http://api.foo/login 为用户提供提供logout路由的“已登录” GUI /组件状态 用户注销/注销时能够“更新” UI。 这是最令人沮丧的 保护我的路由以检查身份验证状态（他们是否需要），并将用户相应地重定向到登录页面 我的问题是 每次导航到另一个页面时，我都需要打电话api.foo/status确定用户是否已登录。（我正在使用Express进行路由的ATM）这会导致Angular确定类似问题ng-show="user.is_authenticated" 成功登录/注销后，我需要刷新页面（我不想这样做）以填充诸如之类的内容{{user.first_name}}，或者在注销的情况下清空该值。 // Sample response from `/status` if successful { customer: {...}, is_authenticated: true, authentication_timeout: 1376959033, ... } 我尝试过的 http://witoldsz.github.io/angular-http-auth/ 1 http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ 2 https://github.com/mgonto/restangular（对于我的一生，我不知道该如何POST处理post data和不该使用query params。文档对此没有任何帮助。 为什么我觉得自己迷失了方向 似乎每个教程都依赖于某些数据库（大量的Mongo，Couch，PHP + MySQL，无限广告）解决方案，并且没有一个纯粹依靠与RESTful API的通信来保持登录状态。登录后，将发送其他POST / GETwithCredentials:true，所以这不是问题 我找不到任何使用Angular + …

71 javascript  angularjs  node.js  restful-authentication  angular-http-interceptors 

我试图从数组中删除元素，$scope.items以便在视图中删除项目ng-repeat="item in items" 仅出于说明目的，下面是一些代码： for(i=0;i<$scope.items.length;i++){ if($scope.items[i].name == 'ted'){ $scope.items.shift(); } } 如果名称正确，我想从视图中删除第一个元素吗？它工作正常，但是视图会重新加载所有元素。因为所有阵列键都已移动。这在我正在创建的移动应用程序中造成了不必要的延迟。 有人对此问题有解决方案吗？

71 angularjs  scope  angularjs-ng-repeat