angularjs-directive | 易学教程

AngularJS form validation directive for showing input errors

阅读更多关于 AngularJS form validation directive for showing input errors

I need to create a validation directive for showing all input errors for each input automatically. This validation directive should show all errors at current moment and list of errors should be updated automatically while user is typing. I need to show all errors for input if input is dirty, not empty and invalid. I need to add all errors into html element near this input element. For example if input have type="email" and ng-minlength="5" and user typed 'abc' I need to show such errors near this input: 'Invalid email; Please enter at least 5 characters;' For example if input has type="number

Template must have exactly one root element with custom directive replace: true

阅读更多关于 Template must have exactly one root element with custom directive replace: true

I am having issues with a custom directive with replace: true, http://jsbin.com/OtARocO/2/edit As far as I can tell, I do only have one root element, my , what is going on here? Error: Template must have exactly one root element. was: <tbody> <tr><td>{{ item.name }}</td></tr> <tr><td>row2</td></tr> </tbody> Javascript: var app = angular.module("AngularApp", []) .directive('custom', [function () { return { restrict: 'E', replace: true, templateUrl: 'lineItem.html', link: function(scope, element, attrs) { } }; }]) .controller('MyCtrl', ['$scope', function($scope) { $scope.items = [ { name: 'foo'

add watch on a non scope variable in angularjs

阅读更多关于 add watch on a non scope variable in angularjs

Is there a way to add watch to a non scope variable. I want to add a watch to local variable. I have something like this function EditAssetRegistryController(assetregistryService, manufacturerService, assettypeService, projectService, $localStorage, $routeParams) { var vm = this; vm.manufacturers = []; vm.projects = []; vm.asset_types = []; vm.ch_group_uniq = 'none'; } here is there a way to add watch to vm.ch_group_uniq? I know how it will be done with scope variable but I have scenarios where I have to check many complex variables. Pankaj Parkar $watch will not work as normal syntax with

Pass argument between parent and child directives

阅读更多关于 Pass argument between parent and child directives

问题 I have parent directive for navigation menu and child directives for menu links. Something like this: <menu> <menu-link /> <menu-link /> </menu> In menu directive I use ng-translucent to be able to add html. Is there any way to pass argument from menu to all menu-link elements? For example, if: <menu ng-disabled='true'.. I want all menu-link directives to get that value from parent. One more thing: each menu-link have its own attributes, so it needs to have own scope. 回答1: You can make use of

How to manipulate styles of directive in AngularJS?

阅读更多关于 How to manipulate styles of directive in AngularJS?

I'm writing a component using AngularJS and AngularJS directives. I'm doing something like this: var MyApp = angular.module('MyApp', []); MyApp.directive('myTag', function() { return { /* Some logic here*/ } }); I want to be able to change style of my component (using CSS), something like this: <my-tag class="MyClass"></my-tag> Besides this I want to be able to manipulate all elements style inside my component (HTML markup inside of my-tag). Do you have any advice or useful examples how to manipulate the style properties of custom tags using AngularJS? This should do the trick. var MyApp =

Uploading a file with AngularJS and bluimp on success callback of another form

阅读更多关于 Uploading a file with AngularJS and bluimp on success callback of another form

I have followed the following tutorial in order to integrate the notorious bluimp jQuery file uploader in my AngularJS project. After some research I found that in the options array, witihn the jquery.fileuploader.js file, there is an option called autoUpload, which when set to true upload the file automatically. I tried to disable it(false, undefined), but quickly I learned out that this causes the upload not to function at all, not even on the form submit. I need to trigger the upload manually, say within another callback, or by a click event. can that be done?. code: app.directive(

A Simple Uploader using AngularJs (with CORS Implementation)

阅读更多关于 A Simple Uploader using AngularJs (with CORS Implementation)

问题 Recently, I had to write a simple uploader (reusable) using AngularJs, while, keeping my API in separate place and finally wrote one using blueimp jQuery File Uploader and made lil customizing it. I Thought it might be great to share this and hopefully improve myself in learning in AngularJs. (I've added the answer) 回答1: http://codelikeapoem.com/2013/05/angularjs-tutorial-4-file-upload-using.html (You can download the entire code their) App.Coffee @angTut = angular.module("angTut", [

AngularJS: Access formController of a form placed inside transcluded directive from parent controller

阅读更多关于 AngularJS: Access formController of a form placed inside transcluded directive from parent controller

I've created a simple "modal dialog" directive, which uses transclude. I would like to place a form () inside the "modal dialog" directive. I would expect that formController of a form placed inside the directive, is going to be accessible in parent controller's scope, however it isn't. Take a look at the following fiddle, please: http://jsfiddle.net/milmly/f2WMT/1/ Complete code: <!DOCTYPE html> <html> <head> <title>AngJS test</title> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/foundation/4.0.9/css/foundation.min.css"> <style> .reveal-modal { display: block; visibility:

Wait for data in controller before link function is run in AngularJS directive

阅读更多关于 Wait for data in controller before link function is run in AngularJS directive

How can I ensure that data from a controller has been loaded in a directive before the link function is run? Using psuedo-code, I could have: <my-map id="map-canvas" class="map-canvas"></my-map> for my html. In my directive I might have something like this: app.directive('myMap', [function() { return{ restrict: 'AE', template: '<div></div>', replace: true, controller: function ($scope, PathService) { $scope.paths = []; PathService.getPaths().then(function(data){ $scope.paths = data; }); }, link: function(scope, element, attrs){ console.log($scope.paths.length); } } }]); The above won't work

Why is my angularjs directive causing two-way binding to fail?

阅读更多关于 Why is my angularjs directive causing two-way binding to fail?

问题 I can't figure out why when my directive is enabled on an element, the two-way binding fails. Consider this plunkr On the first removing the tooltip={{input1Error}} makes the input1 variable update as soon as you type in a valid email. When tooltip={{input1Error}} is added, when typing in a valid email, the input1 model is never updated. What am I missing? 回答1: There is a documented issue with the scope of the controller. You can get around this by implementing the changes below. Change your