Tag: angularjs

当inputvalidation失败时，Angularjs阻止表单提交

我正在写一个简单的login表单使用angularjs与一些客户端inputvalidation，以检查用户名和密码是不是空的和长于三个字符。 看下面的代码： <form name="loginform" novalidate ng-submit="login.submit()" class="css-form"> <fieldset> <div class="control-group input-prepend"> <span class="add-on"><i class="icon-user"></i></span> <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" /> </div> <div class="control-group input-prepend"> <span class="add-on"><i class="icon-lock"></i></span> <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" /> </div> <div class="control-group"> <input class="btn" type="submit" value="Log in"> </div> </fieldset> </form> 和控制器： var controller = function($scope) { $scope.login […]

在Angular.js中进行AJAX调用的最佳做法是什么？

我正在阅读这篇文章： http : //eviltrout.com/2013/06/15/ember-vs-angular.html 它说， 由于缺乏约定，我不知道有多lessAngular项目直接在控制器内部依赖不良实践，如AJAX调用？ 由于dependency injection，开发人员注入路由器参数到指令？ 新手AngularJS开发人员是否将以一种经验丰富的AngularJS开发人员认为是惯用的方式来构build自己的代码？ 我实际上是从我的Angular.js控制器进行$http调用。 为什么这是一个不好的做法？ 那么做出$http调用的最佳做法是什么？ 为什么？

Angular.js vs Knockout.js vs Backbone.js

我正在考虑为我的个人项目使用Knockout或Angular或Backbone。 我需要build立一些更大，更长时间的客户端交互来与我的服务器端的东西。 我想要一个简单而有效的方式来pipe理数据驱动的用户界面。 基于可行性和性能方面，你会select哪种框架来解决上述问题？

我应该将AngularJS与PHP框架混合吗？

AngularJS在交互式HTML5和模型绑定方面非常强大。 另一方面，像Yii这样的PHP框架能够实现快速，结构合理，安全和强大的Web应用程序开发。 这两种技术都为数据访问，迭代和页面布局提供了复杂的手段。 混合这两种方法（客户端和服务器端“页面设置”）是好的还是不好的做法，或者这与交互式，无缝HTML5 AJAX Web应用程序的意义相反？ 我不是在谈论使用PHP生成JS（ 请参阅此问题 ） – 我正在讨论如何生成将使用AngularJS的视图。 我也知道，一个AngularJS页面应该（或可以）通过REST服务与服务器通信来获取数据（ 请参阅此问题 ），而不是直接从例如PHPvariables中检索它。 但是对我来说，在PHP中为整个Web应用程序devise“框架”似乎更为方便（例如，构build主菜单或处理授权/会话等）

Angularjs代码/命名约定

有没有人知道是否存在任何官方或最受欢迎的Angular命名约定的参考，当我们build立我们的应用程序时使用？ Angular有很多不同types的组件，比如filter，指令，服务等等。 你不同意在我们的应用程序中实现它们时有一个参考命名约定是有意义的吗？ 例如： 如果我们需要创build新的filter，我们应该如何将它们命名为[Something] Filter或Filter [Something]或其他？ 同样适用于控制器，服务，指令等。 我想知道的其他事情是，如果属于范围的variables/函数应该有一个特殊的前缀或后缀。 在某些情况下，有办法区分它们与函数和其他（无angular码）。

在ng-hide / ng-show中可能有复杂的expression式吗？

我想这样做： ng-hide="!globals.isAdmin && mapping.is_default" 但expression式的评估总是false 。 我不想在$scope上定义特殊的函数。

什么是AngularJS指令？

我花了很多时间阅读AngularJS文档和几个教程，我对文档的难以接近感到非常惊讶。 我有一个简单的，可回答的问题，对于那些想要selectAngularJS的人来说也是有用的： 什么是AngularJS指令？ 在某个地方应该有一个简单的，精确的指令定义，但是AngularJS网站提供了这些令人惊讶的无用定义： 在主页上 ： 指令是AngularJS中独一无二的强大function。 指令让你发明新的HTML语法，特定于你的应用程序。 在开发者文档中 ： 指令是教导HTML新技巧的一种方法。 在DOM编译期间，指令与HTML匹配并执行。 这允许指令注册行为，或者转换DOM。 讽刺的是，有一系列关于指令的讨论似乎假定观众已经了解了这些指令。 任何人都可以提供清楚的参考，准确定义一个指令是什么解释： 它是什么（ 以jQuery的明确定义为例） 它打算解决哪些实际问题和情况 它体现了什么样的devise模式，或者说它是如何适应AngularJS的声称的MVC / MVW的使命。

AngularJS。 如何从控制器组件外部调用控制器function

如何从网页的任何地方（控制器组件外部）调用控制器下定义的函数？ 当我按下“获取”button时，它完美的工作。 但是我需要从div控制器之外调用它。 逻辑是：默认情况下，我的div是隐藏的。 在导航菜单的某个地方，我按下一个button，它应该显示（）我的div并执行“获取”function。 我怎么能做到这一点？ 我的网页是： <div ng-controller="MyController"> <input type="text" ng-model="data.firstname" required> <input type='text' ng-model="data.lastname" required> <form ng-submit="update()"><input type="submit" value="update"></form> <form ng-submit="get()"><input type="submit" value="get"></form> </div> 我的js： function MyController($scope) { // default data and structure $scope.data = { "firstname" : "Nicolas", "lastname" : "Cage" }; $scope.get = function() { $.ajax({ url: "/php/get_data.php?", type: "POST", timeout: […]

ngClass风格与键中的破折号

我希望这可以帮助人们省去使用破折号的风格，特别是自举已经非常stream行。 我正在使用angular1.0.5的方式 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 在ngClass文档中 ，这个例子很简单，但是它也提到expression式可以是类名到布尔值的映射。 我试图在自举文档中显示的图标上使用“icon-white”样式，具体取决于布尔variables。 <i class="icon-home" ng-class="{icon-white: someBooleanValue}"> 上面的行不起作用。 someBooleanValue为true时，类不会附加icon-white 。 但是，如果我将该键更改为iconWhite ，则会成功添加到类值列表中。 如何用短划线添加一个值？

取消嵌套的ng点击调用之间的事件传播的最好方法是什么？

这是一个例子。 比方说，我想有一个像许多网站的图像覆盖。 所以，当你点击一个缩略图时，整个窗口上会出现一个黑色的叠加层，而图像的一个更大的版本则以它为中心。 点击黑色覆盖层就会解散它。 点击图像将调用一个显示下一个图像的函数。 html： <div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()"> <img src="http://some_src" ng-click="nextImage()"/> </div> javascript： function OverlayCtrl($scope) { $scope.hideOverlay = function() { // Some code to hdie the overlay } $scope.nextImage = function() { // Some code to find and display the next image } } 问题是，在这个设置下，如果你点击图片， nextImage()和hideOverlay()被调用。 但是我想要的只是nextImage()被调用。 我知道你可以在nextImage()函数中捕获和取消事件，如下所示： if (window.event) { window.event.stopPropagation(); } […]