angularjs-directive

问题 FIDDLE How can i count the number of errors made on form ? HTML <div ng-show="form.$submitted && form.$invalid"> Sorry but 3 errors have been made. </div> 回答1: One way you could do this by using the specific count of a specific error criteria, required , pattern etc.. that are available as a part of form's $error[prop] array. In your case you could try using form.$error.required.length :- <div ng-show="form.$submitted && form.$invalid"> Sorry but {{form.$error.required.length}} errors have

问题 I am using jquery timepicker plugin and its angular directive. When I reset the the scope values from javascript then for the same time scope value not updating. I have tried to make changes on timepicker directive file but not succeeded. Example:- Select start-time 1:00AM then end-time automatically sets to 1:15AM which is updated from watch function in JS file. Now click Reset and values would be deleted or input fields would be blank. Now again select the same time 1:00AM the end-time is

问题 I wonder if you have an example of a directive code that reacts on angular events like $routeChangeError without injecting $rootScope in to it (to use $on in link function). It breaks in my opinion MV* pattern and "produces" smell-code (gives the possibility to manipulate root scope in a directive). Thanks in advance. 回答1: If you are only listening for events, you don't have to use the $rootScope ; do e.g. $scope.$on("$routeChangeError") on the scope of the directive, from either controller

问题 I am new to Angularjs, and don't understand too much behind the scene. Basically I want to create an 'E' kink directive, base on the data in controller I dynamically create the html, like a whole 'table' thing, to replace the directive. The directve in my html file is like this: <matrixrows></matrixrows> My directive code is like this: angular.module('matrix', [.....]) .directive('matrixrows', [..., function (...) { return { restrict: 'E', replace: true, require: '^matrix', link: function

问题 I am using angular-xeditable to edit elements within a form. I would like to have all the elements in "editable" mode at all times, e.g. no "edit" button needs to be pushed before the user starts editing. I have been trying to use the $show() in my controller to enable the elements in the form, however it seems like the elements goes into viewing state again for example when using "onaftersave" when trying to save the values etc. How do I do in order to always be in edit mode where the user

问题 I'm making a web app using AngularJS, jQuery, HTML, CSS and Bootstrap, and I would like to pick some image links from my JSON that is located in an Apache2 server and use them in order to render those images in my main page. I would also like to swipe them like in a carousel. To make that work, I'm trying to use iDangero.us Swiper. When I pick my images with 3 separated divs, I have no problems. I get my images and then I can normally swipe them as I want. I do it like shown below: Main.html:

问题 in Angular, I need to call a function after an element with certain class has been loaded. Display of the element is controlled via ng-if='expr'. Value of $scope.expr is set after some ajax call has responded. Now, if I try putting $watch on expr, or using $evalAsync. it is not working. probably the reason being that these events are run before the template part actually runs. Here is a sample code : http://jsbin.com/kuyas/1/edit Here I need a callback sort of thing on ng-if that gets

问题 I'm trying to apply the ng-style attribute on a custom directive tag, kind of like so: <my-directive ng-style="myStyle"></my-directive> Inside the controller I have: $scope.myStyle = { "background": "red" } This doesn't seem to work though. When I inspect the HTML 'MyStyle' does not get rendered. When I apply the same ng-style tag on a regular div it does render properly. Why doesn't ng-style work on custom directive tags? 回答1: Your directive likely defines an isolate scope: scope: { ... } .

问题 I'd like to bind/set some boolean attributes to a directive. But I really don't know how to do this and to achieve the following behaviour. Imagine that I want to set a flag to a structure, let's say that a list is collapsable or not. I have the following HTML code: <list items="list.items" name="My list" collapsable="true"></list> items are two-way binded, name is just an attribute I'd like that collapsable attribute to be available in the list's $scope either by passing a value (true, false

问题 Update : Fiddle w/ full solution: http://jsfiddle.net/langdonx/VXBHG/ In efforts to compare and contrast KnockoutJS and AngularJS, I ran through the KnockoutJS interactive tutorial, and after each section, I'd rewrite it in AngularJS using what little I already knew + the AngularJS reference. When I got to step 3 of the Creating custom bindings tutorial, I figured it would be a good time to get spun up on Angular Directives and write a custom tag. Then I failed miserably. I'm up against two