Tag: angularjs

有没有一种简单的方法来使用button导航页面作为链接在angularjs中做

在angularjs中,我想使用这样的button ,但我仍然需要button看起来。 <button href="#/new-page.html">New Page<button> 作为(链接) <a href="#/new-page.html">New Page</a> 有没有比这更简单的方法? <button ng-click="newPage()">New Page<button> $scope.newPage = function (){ location.href = '#/new-page.html'; }; 注意:实际上,当我使用location.href进行导航时,整体刷新,导航不在angularjs的控制下。 如果我不使用链接,如何在JavaScript代码中导航页面? 我是否需要创build自定义指令来实现它?

如何在angular材料中水平alignment单选button?

我期待一个内置的指令或标签,但可能不符合他们的文档。 这是例子 。 <div class="radioButtondemoBasicUsage" ng-app="MyApp"> <form ng-submit="submit()" ng-controller="AppCtrl"> <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p> <md-radio-group ng-model="data.group1"> <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button> <md-radio-button value="Banana"> Banana </md-radio-button> <md-radio-button value="Mango">Mango</md-radio-button> </md-radio-group>

Angularjs和$ locale

我可以手动设置某些应用程序的$ locale吗? 是否有可能只支持当地人的方式是包括当前语言环境的angular度库本地化文件。 如果有多种文化呢? 在这种情况下,我必须dynamic加载本地化文件? 我错过了什么?

ng-class中的angularjsexpression式语法是什么

AngularJS Noob手册有一些代码将类操作简化为一个简单的expression式和绑定: <a ng-click="flags.open=!flags.open">…<div ng-class="{active:flags.open}"> 但是,ng-class中的expression式语法是什么? 我知道一个竖线(|)会通过一个filter,并且一个filter可以在冒号后传递参数,但是上面的代码正在做一些不同的事情。 如果右侧的范围variables的值为true,那么左侧的expression式将被包含,否则将被删除。 这是特定于ng-class指令吗? http://docs.angularjs.org有一些文档解释了这个吗?

加载相对的templateUrl

我一直在试图find创build模块化,可扩展的angular度应用程序的最佳方式。 我真的很喜欢angular-boilerplate , angular-app这样的项目结构,其中所有相关的文件都通过partials和directives的特性组合在一起。 project |– partial | |– partial.js | |– partial.html | |– partial.css | |– partial.spec.js 但是,在所有这些示例中,模板URL都是相对于基本url加载的,而不是相对于当前文件: angular.module('account', []) .config(function($stateProvider) { $stateProvider.state('account', { url: '/account', templateUrl: 'main/account/account.tpl.html', // this is not very modular controller: 'AccountCtrl', }); }) 这不是非常模块化的,在大型项目中可能难以维护。 我需要记住每次移动这些模块时都要更改templateUrlpath。 这将是很好,如果有一种方法来加载相对于当前文件的模板,如: templateUrl: './account.tpl.html' 有没有办法做这样的angular?

如何在AngularJS中设置嵌套视图?

我有一个应用程序与各种屏幕 。 每个屏幕都分配了一个URL,例如# , mails , contacts等。 在我的主要HTML文件中,我有一个ng-view元素,根据用户select的路线进行更新。 到现在为止还挺好。 现在其中一些屏幕有一个子导航。 例如, #mails确实有一个收件箱和一个发送文件夹。 他们介绍自己有两列:左侧的子导航,右侧的适当的文件夹的邮件。 当您导航到#mails/inbox ,它将redirect到#mails/inbox ,这样基本上收件箱是邮件的默认子视图。 我怎么能设置? 我现在能想到的唯一方法是(对于AngularJS,我相当新颖,因此原谅我,如果这个问题有点幼稚的话)是有两个视图,一个是#mails/inbox ,另一个是#mails/sent 。 当你select一个路线时,这些视图被加载。 当您select#mails它只是redirect到#mails/inbox 。 但这意味着这两个视图都必须使用ng-include作为子导航。 不知怎的,这对我来说是不对的。 我想要更多的是有嵌套视图:顶部之一切换屏幕之间,如邮件,联系人等,最底下的一个变化之间的子视图,如收件箱,发送等。 我将如何解决这个问题?

Angular和Express路由

我已经经历了许多angular度expression的种子,并且研究出它们是如何工作的。 我遇到的问题是: 1)。 我想用ejs-locals进行模板化。 2)。 如何正确configuration服务器端和客户端的路由。 另外,当input/about等URL时,不会产生错误: cannot /get angular度app.js包含: // angular stuff $routeprovider.when('/', { templateUrl: 'index', controller: IndexCtrl }); $routeprovider.when('/about', { templateUrl: 'partials/about', controller: IndexCtrl }); 表示应用程序,JS包含: app.get('/', routes.index); app.get('/about', routes.about); 路线文件夹包含'index.js': exports.index = function(req, res){ res.render('index',{name:"Hello"}); }; exports.about = function (req, res) { res.render('partials/about'); }; 视图文件夹包含index.ejs : <!–HTML head/navigation bar here–> <div ng-view></div> […]

Angular JS Scaling&Performance

我们正在用我们正在为银行build立的一个Angular应用程序来解决性能问题。 不幸的是,显示代码片段是违反合同的。 无论如何,我可以描述一些正在进行的主要问题,我希望可以推荐最佳做法。 应用结构: 本质上,一个巨大的多表格页面。 每种forms都是自己的部分,嵌套的控制器和局部约3层深。 在json对象的集合上重复相同的forms。 每个表单都绑定到重复的对象/模型。 我们应该支持页面上1-200个表单的任何地方。 如果你看看时间表。 我们花费了大量的时间在jQueryparsinghtml方法,jQuery重新计算stye方法,GC事件(垃圾收集)。 我想尽量减less这些应该加快一点点。 它们都是Angular生命周期的一部分,但是可能有更好的方法来避免它们。 这里是剖析器的一些截图: 最终,应用程序是缓慢的,因为重复forms的数量超过了5个。每个forms与其他forms是相对无关的。 我们已经尽量不要在表单之间观看任何共享属性。

在Angular Seed项目中,什么是index-async.html?

我已经开始使用Angular JS,并将其用作与Play Framework POC集成的前端。 我已经完成了教程。 我从github上的种子项目克隆了我的前端。 它有一个app/index.html (我用作我的主页)和一个app/index-async.html 。 后者的意义是什么? 这真的有必要吗?

什么是'更便宜的'性能明智的$广播或$观看

每当用户的angular色发生变化(一个用户可以在多个公司中担任angular色)时,我的应用程序中需要重新加载菜单。 我想知道什么是解决这个问题的最好方法。 目前我正在做以下工作: app.controller('menuLoadingCtrl', function($location, $scope, authService){ $scope.model.initialRole = authService.getRole(); $scope.$watch(function(){return authService.getRole()}, function(val){ if(val && val != $scope.model.initialRole){ $scope.layout.menuSrc = 'partials/menu.html'; } }); }) 简单地将用户redirect到菜单加载视图,并从那里回到菜单视图,一旦angular色完成加载。 我有这个包装在一个函数: $scope.layout.reloadMenu = function(){ $scope.layout.menuSrc = 'partials/menuLoading.html'; } 我打电话在任何情况下,我想重新加载菜单。 我想知道是否可以通过从$ rootScope上的服务广播这个事件,然后在控制器中监听它来使这个过程更加自动化。 任何想法\build议,将不胜感激。