Tag: angularjs
什么是“装饰者”，他们是如何使用的？
我很好奇AngularJS中的装饰器究竟是什么。 除了AngularJS文档中的简介以及YouTubevideo中简短的（尽pipe有趣的）提及之外，没有太多关于装饰器的信息。 正如Angular的人所说，它是一个装饰者： 服务的装饰，允许装饰者拦截服务实例的创build。 返回的实例可以是原始实例，也可以是委托给原始实例的新实例。 我真的不知道这是什么意思 ，我不知道你为什么要把这个逻辑与服务本身分开。 例如，如果我想在不同的条件下返回不同的东西，我只是将不同的parameter passing给相关的函数，或者使用另一个共享该私有状态的函数。 我还是一个AngularJS noob，所以我敢肯定，这只是我已经拿起的无知和/或坏习惯。
在指令中定制模板
我有一个使用Bootstrap标记的表单，如下所示： <form class="form-horizontal"> <fieldset> <legend>Legend text</legend> <div class="control-group"> <label class="control-label" for="nameInput">Name</label> <div class="controls"> <input type="text" class="input-xlarge" id="nameInput"> <p class="help-block">Supporting help text</p> </div> </div> </fieldset> </form> 在那里有很多样板代码，我想减less到一个新的指令 – formsinput，如下所示： <form-input label="Name" form-id="nameInput"></form-input> 产生： <div class="control-group"> <label class="control-label" for="nameInput">Name</label> <div class="controls"> <input type="text" class="input-xlarge" id="nameInput"> </div> </div> 我有这么多的工作通过一个简单的模板。 angular.module('formComponents', []) .directive('formInput', function() { return { restrict: 'E', […]
AngularJS：绑定到服务属性的正确方法
我正在寻找如何绑定到AngularJS中的服务属性的最佳做法。 我已经通过多个示例来了解如何绑定到使用AngularJS创build的服务中的属性。 下面我有两个如何绑定到服务中的属性的例子; 他们都工作。 第一个示例使用基本绑定，第二个示例使用$ scope。$ watch绑定到服务属性 当绑定到服务中的属性时，这两个示例中的哪一个都是首选的，或者还有其他的select，我不知道会被推荐？ 这些例子的前提是，服务应该每隔5秒更新其属性“lastUpdated”和“calls”。 一旦服务属性更新，视图应该反映这些更改。 这两个例子都成功了 我想知道是否有更好的方法来做到这一点。 基本绑定 下面的代码可以在这里查看和运行： http : //plnkr.co/edit/d3c16z <html> <body ng-app="ServiceNotification" > <div ng-controller="TimerCtrl1" style="border-style:dotted"> TimerCtrl1 <br/> Last Updated: {{timerData.lastUpdated}}<br/> Last Updated: {{timerData.calls}}<br/> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> <script type="text/javascript"> var app = angular.module("ServiceNotification", []); function TimerCtrl1($scope, Timer) { $scope.timerData = Timer.data; }; app.factory("Timer", function ($timeout) { var […]
Angular JS：当我们已经有了指令的控制器和范围的时候，这个指令的链接函数需要什么？
我需要在范围和模板上执行一些操作。 看来我可以在link函数或controller函数中这样做（因为两者都可以访问范围）。 什么时候需要使用linkfunction而不是控制器？ angular.module('myApp').directive('abc', function($timeout) { return { restrict: 'EA', replace: true, transclude: true, scope: true, link: function(scope, elem, attr) { /* link function */ }, controller: function($scope, $element) { /* controller function */ } }; } 另外，我知道这个link是无棱angular的世界。 所以，我可以使用$watch ， $digest和$apply 。 当我们已经有了控制器的时候， link函数的意义是什么？
SPAauthentication和会话pipe理的最佳实践
当使用Angular，Ember，React等框架构buildSPA风格的应用程序时，人们认为什么是authentication和会话pipe理的最佳实践？ 我可以考虑几种考虑解决问题的方法。 假设API和UI具有相同的原始域，对待它与对常规Web应用程序进行authentication没有区别。 这可能涉及具有会话cookie，服务器端会话存储和可能的一些会话API端点，authentication的web UI可以获得当前用户信息以帮助个性化或者甚至可以确定客户端上的angular色/能力。 服务器仍然会执行保护数据访问的规则，UI将只使用这些信息来定制体验。 像使用公共API的任何第三方客户端一样对待它，并使用类似于OAuth的某种令牌系统进行身份validation。 客户端UI使用此令牌机制来validation向服务器API发出的每个请求。 我在这里并不是什么专家，但是绝大多数情况下＃1似乎已经完全够用了，但是我真的很想听听一些更有经验的意见。
AngularJS与jQuery有什么不同？
我只知道一个js库，那就是jQuery 。 但是我的其他编程人员正在将AngularJS作为新项目的默认库。 我对此一无所知。 与jQuery有什么不同呢？ 我已经有一组function在jQuery中完成类似的任务。 我仍然可以使用AngularJS的jQuery的东西吗？
bootsrap导航栏collapsable不能使其工作
我正在开发一个Angularjs应用程序，我想使它成为多平台，所以要做到这一点，我试图使用Bootsrap，我发现了一个模板，我想遵循（ https://blackrockdigital.github.io/startbootstrap -business-frontpage /＃ ）问题是我想在屏幕尺寸较小时转换导航栏。 但我不知道我错过了什么，因为它正确地转换到一个button，但然后，button不可点击，所以选项'inicio'，'servicios'和'contacto'是无法访问。 任何帮助将是真棒，在这里你有CSS和HTML文件： HTML <!DOCTYPE html> <html ng-app="home"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>HOME</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script> <link href="/web/resources/css/business-frontpage.css" rel="stylesheet" /> <script src="/web/resources/js/home/home-service.js"></script> <script src="/web/resources/js/home/home-controller.js"></script> <script src="/web/resources/js/home/home-app.js"></script> <script src="/web/resources/lib/translate/angular-translate.js"></script> <script src="/web/resources/js/generic/urlLanguageStorage.js"></script> <script src="/web/resources/lib/translate/angular-translate-loader-url.min.js"></script> </head> <body> <!– […]
angularjs在控制器之间共享数据configuration
我想知道什么是控制器之间共享指令的好方法。 我有两个不同的configuration使用不同的控制器的指令，第一个想到我想使用像： //html <body data-ng-controller="MainCtrl"> <div class="container"> <div data-ui-view></div> </div> </body> //js .controller('MainCtrl', function ($scope,$upload) { /*File upload config*/ $scope.onFileSelect = function($files) { for (var i = 0; i < $files.length; i++) { var file = $files[i]; $scope.upload = $upload.upload({ url: 'server/upload/url', method: 'POST', data: {myObj: $scope.myModelObj}, file: file, }).progress(function(evt) { console.log('percent: ' + parseInt(100.0 […]
ng选中不在select元素中工作
我有一个绑定select <select ng-model="collegeSelection" ng-options="c as c.CollegeName for c in colleges" ng-selected="c.CollegeName == collegeSelection.CollegeName" name="selectCollege" id="selectCollege"></select> 但是当两个c.CollegeName == collegeSelection.CollegeName匹配的项目仍然没有被选中。 文档似乎没有帮助。 有任何想法吗？
Angular UI-Router $ urlRouterProvider .when不工作*不再*
问题：为什么我的$urlRouterProvider .when()不再工作？ 我拿起了一个相当强大的angular度的应用程序。 我一直试图解决的最近的问题是“页面刷新丢失的用户凭据”问题。 这个项目的authentication服务没有什么意义，当我把它拿起来，经过挖掘，我知道它是从一些随机的代码页面放在一起。 它也没有完全工作，所以我研究了不同的来源，并决定完全实现其中的一个（ angular度 – 客户端 – authentication ） 现在，我所实现的auth服务/控制器基本上与angular-client-side-auth中的一样 ，但是我正在使用的站点使用基于令牌的身份validation。 令牌function已经基本就位，所以我没有任何麻烦让它工作。 在这一点上，我已经让用户保持login刷新，路由与他们的身份validation一起工作（之前使用庞大的代码来禁用视图中的元素）。但是，现在$urlRouterProvider .when()被打破。 他们以前工作得很好，所以我知道我所做的一切都是错误的 – 但是我不能简单地撤消我已经实施的东西！ 所以这是我使用的$ urlRouterProvider代码。 值得一提的是，我已经包含/需要.when() ，而angular度客户端authentication似乎并没有使用它们。 我期望他们可以用这个代码来实现，但是也许有些东西会使.when()的function.when() 。 我不这么认为。 也可以澄清，我还没有使用.rule或$httpProvider.interceptors 。 我已经尝试使用这些实现的网站，但他们似乎没有什么区别。 $urlRouterProvider .when('/myState/group', ['$state', 'myService', function ($state, myService) { $state.go('app.myState.group.id', {id: myService.Params.id}); }]) .otherwise('/'); 所以基本上，如果用户或站点将用户引导到/myState/group ，他们实际上应该最终在状态app.myState.group.id url？ 他们虽然没有，我不明白为什么。 有关使用urlRouterProvider的问题没有太多的。 会发生什么？ 那么/myState/group的视图加载正常，在它的<ui-view>是一个生成的id列表。 你可以点击一个ID，调用一个设置ID的函数，然后执行$state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); […]
