angularjs-directive | 易学教程

How to use ng-href with absolute url?

阅读更多关于 How to use ng-href with absolute url?

问题 I'm still new to angularjs, and I have a problem that I seem to not be able to find solution, and I don't have time to go look into angular source. This is my scenario: I have some json data with collection of urls that I want to show on screen. I have an element with ng-repeat="link in links" and inside I have <a ng-href="{{link.url}}">{{link.title}}</a> That works, but all links are pointing to mydomain/apppath/ valueoflink.title I want them to be absolute, only valueoflink.title without

Angularjs filtering values based on selected option

阅读更多关于 Angularjs filtering values based on selected option

问题 Hi I am trying to display certain values based on option selected in a drop down. My code is data is [{"city":"New York","location":"123"}, {"city":"Chicago","location":"953"} {"city":"New York","location":"788"} {"city":"Chicago","location":"853"}] Code is <form name="test" class="form-horizontal"> <div class="from-group container"> <label for="abc" class="col-sm-2">City</label> <div class="col-sm-10"> <select class="form-control" ng-model="cc"> <option ng-repeat="city in cities" value="city

How do I capture table td elements using mousedown.dragselect event?

阅读更多关于 How do I capture table td elements using mousedown.dragselect event?

问题 I have a directive which renders a HTML table where each td element has an id What I want to accomplish is to use the mousedown.dragselect/mouseup.dragselect to determine which elements have been selected, and then highlight those selected elements. What I have so far is something like this: var $ele = $(this); scope.bindMultipleSelection = function() { element.bind('mousedown.dragselect', function() { $document.bind('mousemove.dragselect', scope.mousemove); $document.bind('mouseup.dragselect

ng-include, ng-template or directive: which one is better for performance

阅读更多关于 ng-include, ng-template or directive: which one is better for performance

问题 I would like to know the best way to design an angular app regarding performance, for building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the main content is the central DIV which will have its content varying between routes, header and footer will be almost always the same, sidebar can vary in certain pages. --- index.html <body ng-cloak> <div data-ng-include data-src="'partials/template/header.html'"></div> <div data-ng-include data-src="'partials

Force image orientation angularjs

阅读更多关于 Force image orientation angularjs

问题 I have this odd behavior when I upload an image and if this image size has more height than with I get the image rotated 90 degrees. check this fiddle that's using ngImgCrop and this is the image that I'm uploading the code of the ngDmgCrop it's pretty standard: angular.module('app', ['ngImgCrop']) .controller('Ctrl', function($scope) { $scope.myImage=''; $scope.myCroppedImage=''; var handleFileSelect=function(evt) { var file=evt.currentTarget.files[0]; var reader = new FileReader(); reader

When do we know the actual width of an element in Angular?

阅读更多关于 When do we know the actual width of an element in Angular?

问题 I'm tring to create a directive that will center a div. So far, I have this code: app.directive("setcenter", function () { return { scope:{ setcenter: '=' }, link: function (scope, element, attrs) { scope.$watch('setcenter', function (newValue) { if (newValue == true) { var width = element.width(); element.css('position', 'absolute'); element.css('top', '80px'); element.css('left', '50%'); element.css('z-index', '200'); element.css('margin-left', '-' + width / 2 + 'px'); } }); } } }); The

How to get an Array with just the values from selected checkboxes?

阅读更多关于 How to get an Array with just the values from selected checkboxes?

问题 How can I bind checkboxes to an array in my model, so that the array always contains just the values corresponding to the selected checkboxes? For example, instead of: "groups": { "name1": true, "name2": false, "name3": true } I need to get: "groups": [ "name1", "name3" ] I browsed through a lot of questions and some answers suggested using ng-true for getting custom values, but that does not solve the problem, because then I get: "groups": { "name1": 'CustomvalueIset', "name2":

How to execute a sequence of events in Angular using $timeout

阅读更多关于 How to execute a sequence of events in Angular using $timeout

问题 I have a div in my view , I want to execute a function on ng-click() which turns the background for the div to 'color a' for 30 seconds if there's no action taken then for 60 seconds then change to 'color b' and if no action is taken beyond 120 seconds just hide the div.(this can be done via adding/removing classes as well ) In essence I'm looking to execute a sequence of $timeouts in angular where one timeout leads into another. Any help on that would be hugely appreciated. Thanks. 回答1: I

how to pass either a model or a string to a directive in angularjs?

阅读更多关于 how to pass either a model or a string to a directive in angularjs?

问题 I'm working on a directive, where one of the parameters to it can either be a model (dynamic value) or sometimes a string. The only way I could do this was using @ . Is there a better way to do this? <my-directive foo="{{foomodel}}"> <my-directive foo="foostring"> In my directive I'm using an isolate scope: scope: { foo: '@' } I tried doing this with just strings and it did not work. 回答1: Reading these answers it seems there is much confusion about the differences between '=', '&' and '@'

Different transitions with AngularJS

阅读更多关于 Different transitions with AngularJS

问题 How can I enable different transitions with AngularJS. Lets Say, I have a sidebar in my web application. I the user clicks a button X, the sidebar should disappear very fast, if the user clicks another button, the sidebar should disappear slow. I think, this would work by setting a transition option value after one of that clicks and then changing the visibility state of the sidebar (watched by the transition directive). But that seems a bit like bad style for me. Is there a common way to do