I have a controller function and I cannot call it inside the directive. I am trying hard. is there any thing Else i am failing to do? please tell me. I have included my code here. I have searched many places followed many answers and now I am stuck at this
(function () {
var app = angular.module("featureModule", ['ngRoute']);
//
app.directive('myGoogleAutocomplete', function () {
return {
replace: true,
require: 'ngModel',
scope: {
ngModel: '=',
googleModel: '=',
onSelect: '&?', // optional callback on selected successfully: 'onPostedBid(googleModel)'
},
template: '<input class="form-control" type="text" style="z-index: 100000;" autocomplete="on">',
link: function ($scope, element, attrs, model)
{
var autocomplete = new google.maps.places.Autocomplete(element[0], googleOptions);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
$scope.$apply(function () {
var place = autocomplete.getPlace();
if (!place.geometry)
{
// User entered the name of a Place that was not suggested and pressed the Enter key, or the Place Details request failed.
model.$setValidity('place', false);
//console.log("No details available for input: '" + place.name + "'");
return;
}
$scope.googleModel = {};
$scope.googleModel.placeId = place.place_id;
$scope.googleModel.latitude = place.geometry.location.lat();
$scope.googleModel.longitude = place.geometry.location.lng();
$scope.googleModel.formattedAddress = place.formatted_address;
if (place.address_components) {
$scope.googleModel.address = [
$scope.extract(place.address_components, 'route'),
$scope.extract(place.address_components, 'street_number')
].join(' ');
}
model.$setViewValue(element.val());
model.$setValidity('place', true);
if (attrs.onSelect)
{
//how to call controller function here?
$scope.onSelect({ $item: $scope.googleModel });
}
});
});
}
}
});
app.controller("featureController", function($scope,$http,$rootScope,close,ModalService,NgMap) {
console.log($rootScope.permService);
$scope.onSelect=function(val)
{
console.log(val);
}
});
<my-google-autocomplete id="address" name="address" ng-model="task.house_no" google-model="model.googleAddress"
on-select="vm.onSelectGoogleAddress($item)" autocomplete="off" required>
</my-google-autocomplete>
There is no onSelectGoogleAddress() function in the controller. I see only onSelect() function. Change on-select value passed in the html.
<my-google-autocomplete id="address" name="address" ng-model="task.house_no" google-model="model.googleAddress"
on-select="onSelect($item)" autocomplete="off" required>
</my-google-autocomplete>
You can bind callback event by using elemet inside link function.
Here is the example . Hope it helps.
Let the controller having callback function from directive as below
app.controller('MainCtrl', function($scope) {
$scope.SayHello=function(id){
alert(id);
}
});
Let the directive
app.directive('dirDemo', function () {
return {
scope: {
okCallback: '&'
},
template: '<input type="button" value="Click me" >',
link: function (scope, element, attrs) {
var param='from directive';
element.bind('click', function () {
scope.$apply(function () {
scope.okCallback({id:param});
});
});
}
}
});
HTML is
<body ng-controller="MainCtrl">
<div dir-demo
ok-callback="SayHello(id)"
</div>
</body>
Working plunker https://plnkr.co/edit/RbFjFfqR1MDDa3Jwe8Gq?p=preview
Related
I want to reset this directive(clear the file chosen) when clear button is clicked. Currently even though when clear button is clicked , the file chosen is still exits and its not cleared.
test.html
<form class="form form-basic" id="testForm" name="testForm">
<div class="row">
<label class="col-md-6 control-label">File :</label>
<div class="col-md-6">
<div class="form-group">
<input type="file" ng-model="test" on-read-file="loadContent($fileContent)" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="clear()">Clear</button>
</div>
directive.js
fileAccessModule.directive('onReadFile', function ($parse) {
return {
restrict: 'A',
scope: false,
link: function (scope, element, attrs) {
var fn = $parse(attrs.onReadFile);
element.on('change', function (onChangeEvent) {
var reader = new FileReader();
reader.onload = function (onLoadEvent) {
scope.$apply(function () {
fn(scope, {$fileContent: onLoadEvent.target.result});
});
};
reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
});
}
};
});
testController.js
testControllerModule.controller('testController', function ($scope, $log, $location, deviceDetailsService) {
$scope.clear = function () {
$scope.connectionParams = null;
};
$scope.loadContent = function ($fileContent) {
$scope.connectionParams.privateKey = $fileContent;
};
});
Not sure what $scope.connectionParams is that by setting it to null, you are expecting the form to be reset.
However, to achieve the same form reset logic, you can resort to Javascript's built-in reset() method, but, in an Angularized manner.
To do so, you can define a directive for this as such:
/* ... */
.directive('formReset', function() {
return {
restrict: 'E',
replace: true,
scope: {
formName: '#'
},
link: function(scope, iElement) {
iElement.on('click', function() {
var form = document.querySelector('[name="' + scope.formName + '"]');
form.reset();
});
}
},
template: '<button type="button">Reset</button>'
})
and, use it in your form as in the following:
<form-reset form-name="yourFormName"></form-reset>
Demo
So I'm beginner to angularjs and firebase and I'm trying to develop an app which adds values(numerical) on an input. So far I have this:
app.js:
var app = angular.module("app", ['firebase']);
app.directive('addOne', function() {
return {
link: function(scope,element) {
element.bind('click', function() {
console.log(element.parent().find('input'))
element.parent().find('input')[1].value++;
});
}
}
});
and my view:
<section class="form-group">
<label for="">$</label> <input type="button" value="+" add-one>
<input ng-model="user.level" type="text" class="form-control" />
</section>
and my controller:
app.controller('mController', ['$scope', 'User',
function($scope, backHome, User, adicionar){
$scope.user = User(1);
User(1).$bindTo($scope, "user");
}
]);
the thing is that after I click the button with the directive add-one the value of the input changes but the $bindTo is not working...
So why does the bindTo doesn't work when I make a change directly in the DOM?
AngularJS doesn't care what the value of an input is set to, it only cares about what's in the ng-model. Try this...
app.directive('addOne', function() {
return {
link: function(scope,element) {
element.on('click', function() {
scope.$apply(function(){
scope.user.level++
});
});
}
}
});
As pointed out by #PankajParkar, you also need to use scope.$apply when you want to update a binding from event.
angular.module('demo', [])
.controller('DemoController', function($scope){
$scope.user={level: 1};
})
.directive('addOne', function() {
return {
link: function(scope, element, attrs) {
element.on('click', function() {
scope.$apply(scope.user.level++);
});
}
}
})
.directive('unaryInput', function(){
return {
restrict: 'EA',
scope: {
model: "=",
txt: '#buttonText'
},
template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',
link: function(scope, element, attrs) {
if(angular.isDefined(attrs.initialVal)) {
scope.model = attrs.initialVal;
}
element.on('click', function() {
if (attrs.direction === 'decrement') {
scope.$apply(scope.model--);
} else {
scope.$apply(scope.model++);
}
});
}
};
});
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
<input type="text" ng-model="user.level">
<input type="button" value="+" add-one>
<hr>
<unary-input button-text="Add one" model="user.level" direction="increment"></unary-input>
<unary-input button-text="-" model="user.level" direction="decrement"></unary-input>
<hr>
<unary-input button-text="-" model="user.val" direction="decrement" initial-val="10"></unary-input>
</div>
In AngularJS, you want to change the view by changing the model that it's based on, versus doing it imperatively like you might with a traditional jQuery approach for example (traversing the DOM and incrementing the value).
UPDATE
Okay, so here's a nice reusable version of the (please check the snippet to see it in action).
The template includes both the button and the input. It accepts 4 values that you set as attributes:
button-text: The text you want to show on the button.
model: The model value for the input.
initial-val: The initial value for the input if you don't want to initialize on your controller.
direction: Whether to increment or decrement the values. This one currently accepts a string "decrement" to subtract. If you have no direction set or any other value set in the attribute, it will increment.
So, you would use it like this:
<unary-input button-text="Subtract One" model="user.val" direction="decrement" initial-val="10"></unary-input>
And the directive itself looks like this:
.directive('unaryInput', function(){
return {
restrict: 'EA',
scope: {
model: "=",
txt: '#buttonText'
},
template: '<input type="text" ng-model="model" /><button>{{txt}}</button>',
link: function(scope, element, attrs) {
if(angular.isDefined(attrs.initialVal)) {
scope.model = attrs.initialVal;
}
element.on('click', function() {
if (attrs.direction === 'decrement') {
scope.$apply(scope.model--);
} else {
scope.$apply(scope.model++);
}
});
}
};
});
Browsing around I could find a solution doing the way you said in the comments (two buttons one incrementing and another decrementing) thanks a lot for the help! and here's the final version.
app.directive('unaryInput', function(){
return {
restrict: 'EA',
scope: {
model: "="
},
template: '<input type="text" ng-model="model" /><button ng-click="decrement()">-</button><button ng-click="increment()">+</button>',
link: function(scope, element) {
scope.increment = function() {
scope.model++;
}
scope.decrement = function() {
scope.model--;
}
}
};
});
I am trying to call a parent function from a directive. But my functions are not being called.
Here is the code for your reference.
Controller
'use strict';
angular.module('myApp')
.controller('MyCtrl', function($scope) {
$scope.iconSelected = function() {
console.log('iconSelected');
var icon = angular.element('#icon').prop('files');
if (!icon) {
return;
}
icon = icon[0];
var _URL = window.URL || window.webkitURL;
$scope.utility.icon = _URL.createObjectURL(icon);
}
$scope.sourceSelected = function() {
console.log('sourceSelected');
var source = angular.element('#source');
console.log(source.prop('files'));
};
});
Directive
'use strict';
angular.module('myApp')
.directive('uploadButton', function() {
return {
templateUrl: 'app/directives/upload-button/upload-button.html',
restrict: 'E',
transclude: true,
scope: {
onSelect: '&'
},
link: function(scope, element, attrs) {
scope.name = attrs.name;
scope.id = attrs.id || attrs.name;
scope.label = attrs.label || attrs.name;
scope.accept = attrs.accept;
scope.showDialog = function() {
element.find('#' + scope.id).trigger('click');
};
element.find('input').change(function() {
scope.$apply(attrs.onSelect);
});
}
};
});
Directive Template
<md-input-container class="upload-button">
<md-button class="md-raised" ng-click="showDialog()">
<span ng-transclude></span>
</md-button>
<input type="file" name="{{name}}" id="{{id}}" aria-label="{{label}}" accept="{{accept}}">
</md-input-container>
Directive Usage
<upload-button name="icon" on-select="iconSelected()" accept=".svg">Choose an icon</upload-button>
<upload-button class="source-btn" name="source" on-select="sourceSelected()" accept=".zip">Select source code</upload-button>
Inside your directive code you are calling onSelect using attrs.onSelect change it to scope.onSelect. attrs.onSelect will just give you the string value iconSelected(). You need the function reference which will be available in the isolated scope which is created by the directive.
element.find('input').change(function() {
scope.$apply(scope.onSelect);
});
I'm a bit stuck on an directive which add attributes and recompile the element.
If I had a scope on the directive ng-change is not triggered anymore (without it it works). I based my test on this answer
The HTML
<div ng-app="myApp">
<div ng-controller='testController'>
<div ng-repeat="field in fields">
<input type="text" ng-model="ngModel[field.fieldName]" property="{{formParams.getProperties(field.fieldName)}}" update-attr ng-change="test()" />
</div>
</div>
</div>
The directive:
angular.module('myApp', [])
.controller('testController', function ($scope) {
$scope.properties = {
"something": {
"style": "float:left;"
},
"something2": {
"style": "float:right;"
}
};
$scope.ngModel = {};
$scope.fields = [{
fieldName: 'something'
}, {
fieldName: 'something2'
}];
$scope.test = function () {
alert('i dont get triggered');
};
$scope.formParams = {
getProperties: function (fieldName) {
return $scope.properties[fieldName];
}
};
})
.directive('updateAttr', function ($compile) {
return {
restrict: 'A',
replace: true,
terminate: true,
scope: {
ngModel : '='
},
link: function (scope, elem, attrs) {
if (angular.isDefined(attrs['property']) && attrs['property'].lenght != 0) {
var json = JSON.parse(attrs['property']);
angular.forEach(json, function (value, key) {
elem.attr(key, value);
});
elem.removeAttr('property');
var $e = $compile(elem[0].outerHTML)(scope);
elem.replaceWith($e);
}
}
};
});
Here a fork of the fiddle to test with a scope on the directive: fiddle
Do you have any suggestion ?
I found why ng-change was not trigger so I share the answer:
When we add scope attribute on the directive, a new scope is created. So we have to use $scope.$parent for the compilation. I have updated the fiddle with the correction.
I have places in my code where I have this:
<input data-ng-disabled="SOME_SCOPE_VARIABLE" />
I would like to be able to use it like this too:
<input data-ng-autofocus="SOME_SCOPE_VARIABLE" />
Or even better, mimicking how ng-style is done:
<input data-ng-attribute="{autofocus: SOME_SCOPE_VARIABLE}" />
Does this exist in the current version of AngularJS? I noticed in the code there's a BOOLEAN_ATTR which gets all the attr's that AngularJS supports. I don't want to modify that in fear of changing versions and forgetting to update.
Update: AngularJS now has an ngFocus directive that evaluates an expression on focus, but I mention it here for the sake of completeness.
The current version of AngularJS doesn't have a focus directive, but it's in the roadmap. Coincidentally, we were talking about this on the mailing list yesterday, and I came up with this:
angular.module('ng').directive('ngFocus', function($timeout) {
return {
link: function ( scope, element, attrs ) {
scope.$watch( attrs.ngFocus, function ( val ) {
if ( angular.isDefined( val ) && val ) {
$timeout( function () { element[0].focus(); } );
}
}, true);
element.bind('blur', function () {
if ( angular.isDefined( attrs.ngFocusLost ) ) {
scope.$apply( attrs.ngFocusLost );
}
});
}
};
});
Which works off a scope variable as you requested:
<input type="text" ng-focus="isFocused" ng-focus-lost="loseFocus()">
Here's a fiddle: http://jsfiddle.net/ANfJZ/39/
You can do this with the built-in ngAttr attribute bindings.
<input ng-attr-autofocus="{{SOME_SCOPE_VARIABLE}}">
The autofocus attribute will be added if SOME_SCOPE_VARIABLE is defined (even if it's false), and will be removed if it's undefined. So I force falsy values to be undefined.
$scope.SOME_SCOPE_VARIABLE = someVar || undefined;
This directive should do the trick:
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
scope: {'autofocus':'='}
link : function($scope, $element) {
$scope.$watch 'autofocus', function(focus){
if(focus){
$timeout(function() {
$element[0].focus();
});
}
}
}
}
}]);
Taken from here: https://gist.github.com/mlynch/dd407b93ed288d499778
scope.doFocus = function () {
$timeout(function () {
document.getElementById('you_input_id').focus();
});
};
Create a directive like this
.directive('autoFocus', ['$timeout', function ($timeout) {
return {
restrict: 'A',
link: function ($scope, $element) {
$timeout(function () {
$element[0].focus();
});
}
}
<input type="text" auto-focus class="form-control msd-elastic" placeholder="">
What I did is using regular autofocus on my inputs: <input autofocus>
And then I set the focus on the first visible input with autofocus when angular is ready:
angular.element(document).ready(function() {
$('input[autofocus]:visible:first').focus();
});
Hope this helps.
I did it with two custom directives, something like this:
(function(angular) {
'use strict';
/* #ngInject */
function myAutoFocus($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
$timeout(function() {
element[0].focus();
}, 300);
}
};
}
function myFocusable() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var focusMethodName = attrs.myFocusable;
scope[focusMethodName] = function() {
element[0].focus();
};
}
};
}
angular
.module('myFocusUtils', [])
.directive('myAutoFocus', myAutoFocus)
.directive('myFocusable', myFocusable);
}(angular));
If you add attribute my-auto-focus to an element, it will receive focus after 300ms. I set the value to 300 instead of 0 to let other async components to load before setting the focus.
The attribute my-focusable will create a function in the current scope. This function will set focus to the element when called. As it creates something in the scope, be cautious to avoid overriding something.
This way you don't need to add something to Angular's digest cycle (watch) and can do it entirely in the view:
<input my-focusable="focusOnInput"></input>
<button ng-click="focusOnInput()">Click to focus</button>
I created a JSFiddle to show the myFocusable directive: http://jsfiddle.net/8shLj3jc/
For some reason I don't know, the myAutoFocus directive does not work in JSFiddle, but it works in my page.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<div ng-repeat="x in names">
<input ng-attr-focus={{$first}} value="{{x.name + ', ' + x.country }}" />
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('namesCtrl', function($scope) {
$scope.names = [
{name:'x1',country:'y1'},
{name:'x2',country:'y2'},
{name:'x3',country:'y3'}
];
});
myApp.directive("focus", function(){
return {
restrict: "A",
link: function link(scope, element, attrs) {
if(JSON.parse(attrs.focus)){
element[0].focus();
}
}
};
});
</script>
</body>
</html>
had created above custom directive for one of my use case.
always focusses on first input element.
works for ajax data, browser back/forward buttons.
Tested on chrome and firefox(default autofocus is not supported here)
JSON.parse is used to parse string "true" returned from html to boolean true in JS.
another way to use attrs.focus === "true" for if condition.
so without $timeout you can also use auto focus like this -
<input type="text" ng-show="{{condition}}" class='input-class'></input>
angular.element(document).ready(function(){
angular.element('.input-class')[0].focus();
});
Combining whar others mentioned above:
JS Code:
myApp.directive('ngAutofocus', ['$timeout', function ($timeout) {
var linker = function ($scope, element, attrs) {
$scope.$watch('pageLoaded', function (pageLoaded) {
if (pageLoaded) {
$timeout(function () {
element[0].focus();
});
}
});
};
return {
restrict: 'A',
link: linker
};
}]);
HTML:
<input type="text" ng-model="myField" class="input-block-level edit-item" ng-autofocus>
Set pageLoaded to true from your initial load method of the page get:
var loadData = function () {
..
return $http.get(url).then(function (requestResponse) {
$scope.pageLoaded = true;
......
}