Questions tagged «angularjs»

AngularJS在以任何方式active在当前页面的链接上设置类是否有帮助？ 我想象有一种神奇的方法可以完成，但是我似乎找不到。 我的菜单如下： <ul> <li><a class="active" href="/tasks">Tasks</a> <li><a href="/actions">Tasks</a> </ul> 并且我在自己的路线中有针对每个控制器的控制器：TasksController和ActionsController。 但是我想不出一种方法来将a链接上的“活动”类绑定到控制器。 有什么提示吗？

205 angularjs 

我在视图中有一个ng-click附加的项目清单： <ul id="team-filters"> <li ng-click="foo($event, team)" ng-repeat="team in teams"> <img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}"> </li> </ul> 我foo在指令中处理函数中的click事件，将其$event作为对被单击对象的引用，但是我正在获取对img标记的引用，而不是对li标记的引用。然后，我必须做这样的事情才能得到li： $scope.foo = function($event, team) { var el = (function(){ if ($event.target.nodeName === 'IMG') { return angular.element($event.target).parent(); // get li } else { return angular.element($event.target); // is li } })(); 是否有一种简单的方法可以获取对ng-click绑定元素的引用，而无需在我的指令中执行DOM操作？

204 angularjs  angularjs-directive 

我们正在寻找构建正在创建的应用程序前端的选项，并正在尝试评估一种对我们有用的工具，并为我们提供前进的最佳平台。 这是一个Node.js项目。我们最初的计划是使用Express并沿这条路线走，但是我们决定在开始此阶段之前，最好回顾一下那里的内容。我们的应用程序有几个我们认为不适合单页模型的领域，因为它们是从应用程序的角度关联的，而不是从一个角度来看的。 我们已经看到了一些可用于构建客户端的框架，例如Backbone.js，Meteor等，以及AngularJS。 这可能是一个相当明显的问题，但是我们似乎无法破译AngularJS是纯粹用于单页应用程序还是可以用于多页应用程序（例如Express）。 2013年7月17日更新 为了让大家保持联系，我将在整个过程中更新这个问题。现在，我们将一起构建所有内容，然后我们将看到效果如何。我们已经联系了几位比我们更胜任AngularJS的人员，并提出了有关拆分共享上下文但在单个页面上可能太大的大型应用程序的问题。 共识是我们可以提供多个静态页面，并创建仅与那些页面一起使用的AngularJS应用程序，从而有效地创建SPA的集合并使用标准链接将这些应用程序链接在一起。现在，我们的用例非常具体，因为我们的解决方案具有多个应用程序，并且正如我所说，我们将首先尝试单个代码库并从那里进行优化。 2016年6月18日更新项目跌入悬崖，所以我们从来没有回避太多的事情。我们最近再次选择了它，但是不再使用angular而是使用React。我们仍在使用上一个更新中概述的架构，其中我们使用Express和自包含应用程序，因此，例如，我们有/chat一条Express路线为我们的React聊天应用程序/projects提供服务，另一条路线为Projects应用程序提供了服务，并且以此类推。从某种程度上来说，我们看待它的方式是每个应用程序都是其功能集的总根，它必须能够独立运行，才能将其本身视为一个应用程序。从技术上讲，所有信息都在那里，它只是基本表达，以及您想要使用的客户端应用程序构建优势的任何形式。

201 javascript  node.js  angularjs 

https://docs.angularjs.org/guide/directive 通过侦听此事件，可以删除可能导致内存泄漏的事件侦听器。注册到范围和元素的侦听器在销毁时会自动清除，但是如果您在服务上注册了侦听器，或者在未删除的DOM节点上注册了侦听器，则必须自己清理或您可能会引入内存泄漏的风险。 最佳实践：指令应自行清理。删除指令后，可以使用element.on（'$ destroy'，...）或scope。$ on（'$ destroy'，...）运行清理功能。 题： 我有element.on "click", (event) ->我的指令内： 伪指令销毁后，是否有任何对的内存引用，element.on以防止其被垃圾回收？ Angular文档指出，我应该使用处理程序删除$destroy发出的事件上的事件侦听器。我的印象是destroy()删除了事件监听器，不是吗？

200 angularjs  memory-leaks 

HTML源代码 <div ng-app=""> <div ng-controller="test"> <div ng-address-bar browser="html5"></div> <br><br> $location.url() = {{$location.url()}}<br> $location.search() = {{$location.search('keyword')}}<br> $location.hash() = {{$location.hash()}}<br> keyword valus is={{loc}} and ={{loc1}} </div> </div> AngularJS源代码 <script> function test($scope, $location) { $scope.$location = $location; $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u'); $scope.loc1 = $scope.$location.search().keyword ; if($location.url().indexOf('keyword') > -1){ $scope.loc= $location.url().split('=')[1]; $scope.loc = $scope.loc.split("#")[0] } …

199 javascript  angularjs  routeparams 

我有以下Angular函数： $scope.updateStatus = function(user) { $http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} }); }; 但是无论何时调用此函数，我都会进入ReferenceError: $http is not defined控制台。有人可以帮助我了解我在做什么错吗？

199 angularjs  javascript-framework  angular-http 

我在将单选按钮绑定到其属性具有布尔值的对象时遇到问题。我正在尝试显示从$ resource获取的考试题。 HTML： <label data-ng-repeat="choice in question.choices"> <input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" /> {{choice.text}} </label> JS： $scope.question = { questionText: "This is a test question.", choices: [{ id: 1, text: "Choice 1", isUserAnswer: false }, { id: 2, text: "Choice 2", isUserAnswer: true }, { id: 3, text: "Choice 3", …

199 angularjs  data-binding  model  radio 

我需要对范围和模板执行一些操作。看来我可以在link函数或controller函数中执行此操作（因为两者都可以访问作用域）。 什么时候需要使用link功能而不是控制器？ 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是非角度的世界。所以，我可以使用$watch，$digest和$apply。 link当我们已经有了控制器时，该功能的意义是什么？

199 javascript  angularjs  angularjs-directive 

有人可以澄清一下AngularJS控制器的生命周期是什么吗？ 控制器是单例的，还是按需创建/销毁的？ 如果是后者，什么触发了控制器的创建/销毁？ 考虑以下示例： var demoApp = angular.module('demo') .config(function($routeProvider, $locationProvider) { $routeProvider .when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl'}) .when('/users',{templateUrl: '/users.html', controller: 'UsersCtrl'}) .when('/users/:userId', {templateUrl: '/userEditor.html', controller: 'UserEditorCtrl'}); }); demoApp.controller('UserEditorCtrl', function($scope, $routeParams, UserResource) { $scope.user = UserResource.get({id: $routeParams.userId}); }); 例如： 在上面的示例中，当我导航到时/users/1，将加载用户1并将其设置为$scope。 然后，当我导航到时/users/2，将加载用户2。是相同的UserEditorCtrl重用实例，还是新创建的实例？ 如果是新实例，什么触发了第一个实例的销毁？ 如果重新使用，它如何工作？（即，加载数据的方法似乎在创建控制器时运行）

199 javascript  angularjs 

如您所知，角形和细枝都有共同的控制结构-双花括号。如何更改Angular的默认值？ 我知道我可以在Twig中做到这一点，但是在某些项目中，只有JS无法做到。

198 angularjs  twig 

在模块内，控制器可以从外部控制器继承属性： var app = angular.module('angularjs-starter', []); var ParentCtrl = function ($scope, $location) { }; app.controller('ChildCtrl', function($scope, $injector) { $injector.invoke(ParentCtrl, this, {$scope: $scope}); }); 通过以下示例进行操作：无效链接：http : //blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html 模块内部的控制器也可以从同级继承吗？ var app = angular.module('angularjs-starter', []); app.controller('ParentCtrl ', function($scope) { //I'm the sibling, but want to act as parent }); app.controller('ChildCtrl', function($scope, $injector) { …

198 angularjs  inheritance  angularjs-controller 

我正在尝试构建一个指令，该指令负责将更多指令添加到声明它的元素上。例如，我要建立一个指令，需要增加的照顾datepicker，datepicker-language和ng-required="true"。 如果我尝试添加这些属性然后使用，则$compile显然会生成一个无限循环，因此我正在检查是否已添加所需的属性： angular.module('app') .directive('superDirective', function ($compile, $injector) { return { restrict: 'A', replace: true, link: function compile(scope, element, attrs) { if (element.attr('datepicker')) { // check return; } element.attr('datepicker', 'someValue'); element.attr('datepicker-language', 'en'); // some more $compile(element)(scope); } }; }); 当然，如果我没有$compile该元素，则将设置属性，但不会引导该指令。 这种方法正确还是我做错了？有没有更好的方法来实现相同的行为？ UDPATE：鉴于这$compile是实现此目标的唯一方法，是否有一种方法可以跳过第一个编译过程（该元素可能包含多个子级）？也许通过设置terminal:true？ 更新2：我尝试将指令放入一个select元素，并且按预期方式，编译运行两次，这意味着预期options 的数量是原来的两倍。

197 javascript  angularjs  model-view-controller  mvvm  angularjs-directive 

在cdnjs 的Angular-UI-Bootstrap页面上说： Twitter的Bootstrap的本机AngularJS（Angular）指令。占用空间小（已压缩5 kB！），无需第三方JavaScript依赖项（jQuery，Bootstrap JavaScript）！ ...并具有以下选项 //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js 和 //cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js 区别这些显示出细微的差别，我似乎找不到关于它的任何文档... 长话短说，除非您要创建自定义模板，否则请使用tpls。 它记录在这里：github.com/angular-ui/bootstrap/tree/gh-pages#build-files（也从主页链接）。简而言之，-tpls版本捆绑了默认的Bootstrap模板。无论如何，您只应包括列出的文件之一。-感谢pkozlowski.opensource

196 angularjs  angular-ui  angular-ui-bootstrap 

我认为这是我对angularjs指令最难理解的概念之一。 来自http://docs.angularjs.org/guide/directive的文档说： transclude-编译元素的内容并将其提供给指令。通常与ngTransclude一起使用。包含的优点是链接功能接收一个预先绑定到正确作用域的包含功能。在典型的设置中，小部件创建隔离范围，但是包含不是子项，而是隔离范围的同级。这使得小部件可以具有私有状态，并且可以将包含项绑定到父（预隔离）范围。 true-包含指令的内容。 'element'-包括整个元素，包括以较低优先级定义的所有指令。 它说transclude通常与一起使用ngTransclude。但是ngTransclude文档中的示例根本不使用ngTransclude指令。 我想要一些很好的例子来帮助我理解这一点。我们为什么需要它？它能解决什么？如何使用它？

195 angularjs  angularjs-directive 

我正在尝试使用Angular和Phonegap加载位于远程服务器上但遇到问题的视频。在我的JSON中，URL作为纯HTTP URL输入。 "src" : "http://www.somesite.com/myvideo.mp4" 我的影片范本 <video controls poster="img/poster.png"> <source ng-src="{{object.src}}" type="video/mp4"/> </video> 我所有其他数据都已加载，但是当我查看控制台时，出现以下错误： Error: [$interpolate:interr] Can't interpolate: {{object.src}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL 我尝试添加$compileProvider配置设置，但没有解决我的问题。 $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); 我看到了有关跨域问题的帖子，但不确定如何解决这个问题或应该朝哪个方向发展。有什么想法吗？任何帮助表示赞赏

195 javascript  angularjs  cordova