(sorry for my english :)
I'm using Select2 in my forms with AngularUI ui-select2 directive like this:
<input ng-model="city" type="text" ui-select2="setupCitySelect" />
where setupCitySelect - object with select2 options. I'm setting him up in appropriate scope
$scope.setupCitySelect = {
allowClear: true,
minimumInputLength: 2
...etc, about 50 SLOC
}
All works fine. But when we have, let say, five select2 elements on page (or part of page) - CitySelect, UserSelect, ConditionSelect etc. we get a tons of code, most of them is the same. AngularUI provides "Global Defaults". So we can move repeating code (in directives):
var dirs = angular.module('vipc.directives', ['ui']);
// defaults setting for UI
dirs.value('ui.config', {
select2: {
allowClear: true,
minimumInputLength: 2,
formatInputTooShort: function(term, minLenght) {
var rest = minLenght - term.length;
return "minimum: "+rest;
},
...etc.
But we still need some work in controllers: to set unique properties, such as ajax-url...
And it's come on several pages, several controller. Ough...
Yes, I can put this into one file, say common.js. But I think - it's not best way. Angulas say: "use directive, Luke!". But how? Too complicated docs. I read docs. Three times.
Without success. I wrote some simple dirs, but this...
It should had 'isolated' scope - can be 2 CitySelect on page - in search form and modal form above. compile function? link function?
All i need is just
<myapp-city-select id="city"></myapp-city-select>
<myapp-user-select></myapp-city-select>
...later, same html file
<myapp-city-select id="city2"></myapp-city-select>
Somebody can help?
It should be in the controller. Here is the plunker. showing you that all directives share the same data.
So you can have a directive with common options in the controller and pass specific options into it.
Another option is have a service that defines common options and inject the service into wherever you want.
Related
Here's a quick question:
Is it possible to have a template in which you have multiple templates and call the one you need, when you need it?
Let me explain this a bit better:
I have a modal that I call this way:
$scope.showErrorModal = ->
errorModal = $ionicPopup.show(
title: 'Issues list'
scope: $scope
templateUrl: './sections/modal/modal.tpl.html'
buttons: [{text: 'Close',type: 'button-assertive'}
])
errorModal.then (res) ->
console.log 'tapped!', res
return
return
as you can see, i'm using an external template.
The problem is that this way i need to create different templates everytime my modal needs to change.
What i'd like to do (if possible), is being able to create various sub-templates inside modal.tpl.html and call them in the right modal.
Here's some example code:
modal.tpl.html:
<div id="error-template">
// here the error-modal stuff
</div>
<div id="success-template">
// here the success-modal stuff
</div>
and from the controller, call them like this, for example:
$scope.showErrorModal = ->
errorModal = $ionicPopup.show(
title: 'Issues list'
scope: $scope
templateUrl: './sections/modal/modal.tpl.html#error-template' //Just to make it clear that i want to use only one part of that file
buttons: [{text: 'Close',type: 'button-assertive'}
])
errorModal.then (res) ->
console.log 'tapped!', res
return
return
Is this pure fiction, or it is possible? Are there any other solutions to solve this type of problems?
Other than reducing the number of network requests, I don't see any real benefit to doing what you mentioned in the question. You may want to use multiple modal directives (errorModal, successModel, etc..) anyway to better compartmentalize your code.
If you want to reduce network requests, there is a $templateCache service that enables you to preload your templates with the first request, in some way like this:
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
You may also want to look at angular ui router which is an alternative router implementation that more easily allows nested and master templates.
after some research and study of examples I implemented a pagniation with a filter function.
Im very new to angular, so I need your help if this application is ok or it has some bugs/logical errors.
The target is to select a collection (in this application load1 or load2) and create new objects, manipulate existing, or delete some of them. On every update of the data, it has to be checked if the pagination is synchronous to the collection size.
If the user enters something into the search field, a watcher in the controller is fired for updating the filtered data:
$scope.$watch('search.name', function (newVal, oldVal) {
$scope.filtered = filterFilter($scope.items, {name: newVal});
}, true);
I would be very happy if some of you angular pros can look into this code and give me some feedback. I want to use this in a productive system, so every answer would be great!
Here is a working plunkr: http://plnkr.co/edit/j9DVahEm7y1j5MfsRk1F?p=preview
Thank you!
Watchers are heavy if you use them explicitly throughout your large application.
Use ng-change instead. Also, by passing true to that watcher means you're deep watching which is really a bad thing to do, since it will check each property of the object in the array which is performance intensive.
Since I can't see that you need old and new value for a reason, you can simply use $scope.search.name. Whenever you type in something, $scope.search.name has the updated value. Just need to call a function on ng-change.
DEMO: http://plnkr.co/edit/TWjEoM3oPdfrHfcru7LH?p=preview
Remove watch and use:
$scope.updateSearch = function () {
$scope.filtered = filterFilter($scope.items, {name: $scope.search.name});
};
In HTML:
<label>Search:</label> <input type="text" ng-model="search.name" placeholder="Search" ng-change="updateSearch()" />
Previous answer is still the correct, but you will have to make sure to replace the "page" inside the pagination tag and change it to ng-model.
From the changelog (https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md)
Since 0.11.0:
Both pagination and pager are now integrated with ngModelController.
page is replaced from ng-model.
I'm building an Angular form with a URL field that can be formatted either with a prefix (http://) or without. Using Angular's default url validation requires http://, so I plugged in the following regex, which accepts with and without a prefix:
<input type="text" id="siteAddress" name="siteAddress" ng-model="user.url" ng-pattern="/^(https?:\/\/)?([\dA-Za-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/" required>
This works great, but when I set type="url", Angular's validation overwrites my custom ng-pattern. This form is for mobile users only, so the type="url" is important so that they receive the correct keyboard, and so their mobile OS does not attempt to autocorrect their input.
Is it possible to use type="url" without Angular applying its default validation, or is it possible to modify Angular's default validation so that it accepts no url prefix?
Thanks!
It seems like there is no official API to do that but you always can override default directive or use your directive with higher priority to change the standard behavior.
For example, angular's input directive gets the type from $attributes object, so you may remove this attribute.
directive('ignoreType', function() {
return {
priority: 500,
compile: function(el, attrs) {
attrs.$set('type',
null, //to delete type from attributes object
false //to preserve type attribute in DOM
);
}
}
});
Here is jsfiddle for it.
Of course this solution may also break behavior of other directives which work with type attribute, so use it carefully.
An idea would be to test the $removeControl method from the FormController to see if the native url validation would go off...
http://docs.angularjs.org/api/ng.directive:form.FormController
Inside your controller you would do something like this:
$scope.form.$removeControl('siteAddress');
Im not sure exactly what it will do, since I haven't got the chance to test it out and the docs about this are incomplete... let me know if this works please.
Hope that could give you some help.
I am working on a SPA that pulls in customer data from one $resource call, and gets some generic preference data from another $resource call.
The preference data is sent as an array, which I want to use to populate a series of checkboxes, like so:
<div ng-repeat="pref in fieldMappings.mealPrefs">
<input type="checkbox"
id="pref_{{$index}}"
ng-model="customer.mealPrefs"
ng-true-value="{{pref.name}}" />
<label class="checkbox-label">{{pref.name}}</label>
</div>
When a user clicks one or more checkboxes, I want the values represented in that array of checkboxes to be mapped to an array nested inside a customer object, like so:
.controller( 'AppCtrl', function ( $scope, titleService, AccountDataService ) {
// this is actually loaded via $resource call in real app
$scope.customer = {
"name": "Bob",
"mealPrefs":["1", "3"]
};
// this is actually loaded via $resource call in real app
$scope.fieldMappings.mealPrefs = [
{'id':"1", 'name':"Meat"},
{'id':"2", 'name':"Veggies"},
{'id':"3", 'name':"Fruit"},
{'id':"4", 'name':"None"}
];
});
I have tried setting up ng-click events to kick off functions in the controller to manually handle the logic of filling the correct part of the customer object model, and $watches to do the same. While I have had some success there, I have around 2 dozen different checkbox groups that need to be handled somehow (the actual SPA is huge), and I would love to implement this functionality in a way that is very clean and repeatable, without duplicating lots of click handlers and setting up lots of $watches on temporary arrays of values. Anyone in the community already solved this in a way that they feel is pretty 'best practice'?
I apologize if this is a repeat - I've looked at about a dozen or more SO answers around angular checkboxes, and have not found one that is pulling values from one object model, and stuffing them in another. Any help would be appreciated.
On a side-note, I'm very new to plunkr (http://plnkr.co/edit/xDjkY3i0pI010Em0Fi1L?p=preview) - I tried setting up an example to make it easier for folks answer my question, but can't get that working. If anyone wants to weigh in on that, I'll set up a second question and I'll accept that answer as well! :)
Here is a JSFiddle I put together that shows what you want to do. http://jsfiddle.net/zargyle/t7kr8/
It uses a directive, and a copy of the object to display if changes were made.
I would use a directive for the checkbox. You can set the customer.mealPrefs from the directive. In the checkbox directive's link function, bind to the "change" event and call a function that iterates over the customer's mealPrefs array and either adds or removes the id of the checkbox that is being changed.
I took your code and wrote this example: http://plnkr.co/edit/nV4fQq?p=preview
I have been trying to build a form input directive which will generate a form input based on the model and the model attributes .
For example,
if the field is name and type is text, the directive will return a input html control,
if the field is a list, then it will return a select box
and so on
These inputs are generated using ng-repeat in the view. The inputs are bound to the model in the scope. This is working fine. However, the form validation fails; i.e if the input controls are invalid, the main form still shows the form is valid.
I have put up a simple plunkr to illustrate the issue - http://plnkr.co/edit/R3NTJK?p=preview
NOTE : I have actually nested the form, as the input name field is also dynamically generated from the scope model.
I have been trying to a get hold on this from the past 2 days and this is really driving me nuts.
I m not sure if I m missing something.
I would really appreciate if some one could help me out with this.
Update:
Use the following link function:
link: function linkFn(scope,elem,attr){
var jqLiteWrappedElement =
angular.element('<input type="url" name="socialUrl" ng-model="social.url">');
elem.replaceWith(jqLiteWrappedElement);
$compile(jqLiteWrappedElement)(scope);
}
Plunker.
For reasons I don't understand, the replaceWith() must be executed before the call to $compile. If someone can explain why this is so, we'd appreciate it!
Update2: in the comments below, Artem mentioned that the DOM must be modified before the linking function is called, so this also works:
var myElem = angular.element('some html');
var linkFn = $compile(myElem);
element.replaceWith(myElem);
linkFn(scope);
Original answer:
Instead of the link function, just use a template in your directive:
template: '<input type="url" name="socialUrl" ng-model="social.url">'