I have two directive and want to access controller that defined in hossein's directive.
Directive
app.directive('hossein', function() {
return {
restricted: 'A',
require: '?ngModel',
scope: {
name: '=ngModel'
},
link: function(scope, element, attributes, ngModel) {
console.log(",,,,,,,,,,,,,,,,,,,", scope.name);
},
controller: function($scope) {
var name = $scope.name;
this.fu = function() {
return name;
}
}
}
});
app.directive('shahab', function() {
return {
restricted: 'A',
require: '^?hossein',
scope: {
name: '=ngName'
},
link: function(scope, element, attributes, controll) {
console.log(",,,,,,,,gfddfdfg,,,,,,,,,,,", controll);
scope.name = controll.fu();
}
}
});
Markup
<div ng-app="app">
<div ng-controller="maincontroller">
<form ng-controller="newcontroller" name="myform" id="form">
<h2>AngularJS</h2>
<p>Name:
<input name="user" type="text" hossein ng-model="name">
</p>
<p>Family:
<input name="famil" type="text" shahab ng-name="">
</p>
</form>
</div>
</div>
You must use shahab and hossein directives nested, so you can access the outer controller.
<hossein ng-model="name">
<shahab ng-name="">
</shahab>
</hossein>
Related
Clear number input type does not work for 'e' number
When I clear the input field with input eee in number type, it does not get cleared. Any other input numbers get cleared. Check the JSFiddle. Any hints would be appreciated.
http://jsfiddle.net/2ankx9up/
<div ng-app="app">
<div ng-controller="MainCtrl">
<input type="number" class="form-control" data-ng-model="searchAll">
</input>
<a class="clear" href="" data-ng-click="clearSearch()">X</a>
</div>
</div>
var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope) {
$scope.searchAll = "";
$scope.clearSearch = function () {
$scope.searchAll = "";
};
});
The ng-model directive is unable to clear the content of an <input type="number"> element when that content parses to NaN (not a number). This can happen when a user pastes invalid content or simply types "eee".
One fix is to add a custom directive:
app.directive('clearNan', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
ngModel.$formatters.push(function(value) {
if (!value) elem.val(null);
return value;
});
}
};
})
Usage:
<input type="number" clear-nan ng-model="x" />
The DEMO
angular.module('numfmt-error-module', [])
.directive('clearNan', function() {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
ngModel.$formatters.push(function(value) {
if (!value) elem.val(null);
return value;
});
}
};
})
.run(function($rootScope) {
$rootScope.typeOf = function(value) {
return typeof value;
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="numfmt-error-module">
<input clear-nan type="number" ng-model="x" />
<br>
{{ x }} : {{ typeOf(x) }}
<br>
<button ng-click="x=''">Clear input</button>
</body>
I am trying to create a "name" directive that can host both first and last names.
the code i currently have is:
index.html
<div data-dm-name label="First Name:" info="first_name"></div>
<div data-dm-name label="Last Name:" info="last_name"></div>
directive:
angular
.module('app.names.directive',[])
.directive('dmName', [ directive ])
function directive() {
return {
restrict: 'E',
scope: {
label: '=',
info: '='
},
templateUrl: '/assets/components/name_template.html'
};
}
name_template.html
<div class="wizard-form-group">
<div class="input-group">
<label class="wizard-form-label" for="info">
{{ label }}
</label>
<span class="input-field"
data-ng-class="{
error: form.info.$dirty &&
form.info.$invalid,
focused: form.info.$focused
}"
>
<input
type="text"
name="info"
id="info"
data-ng-model="info"
data-ng-required="true"
data-ng-focus="form.info.$focused = true"
data-ng-blur="form.info.$focused = false"
/>
</span>
</div>
</div>
My problem is that I don't seem to be able to pass in the values for label and info into the template file. What am I doing wrong?
I have just started out using angular so hopefully this has a simple solution.
Thanks in advance
in your directive function add a link function
function directive() {
return {
restrict: 'EA',
scope: {
label: '=',
info: '='
},
templateUrl: '/assets/components/name_template.html',
link : function($scope, element, attrs){
if(attrs.label){
$scope.label = attrs.label
}
if(attrs.info){
$scope.info = attrs.info
}
}
};
}
Your directive is restricted to element, but you're using it as attribute. So you're directive isn't acting upon the element.
You should modify the DDO to:
function directive() {
return {
restrict: 'A', // attribute allowed
scope: {
label: '=',
info: '='
},
templateUrl: '/assets/components/name_template.html'
};
}
I was writing an angularJS directive to input opening hours. Something like:
Here is the directive:
.directive('openhoursDay', function() {
return {
scope: {
openhoursDay:"=",
openhoursActive: "=", //import referenced model to our directives scope
openhoursFrom: "=",
openhoursTo: "="
},
templateUrl: 'templates/open_hours.html',
link: function(scope, elem, attr, ctrl) {
}
}
});
The template:
<div >
<span>{{openhoursDay.day}}</span>
<input type="checkbox" ng-model="openhoursDay.active"/>
<input type="text" ng-model="openhoursDay.open"/>
<input type="text" ng-model="openhoursDay.close"/>
<br>
</div>
HTML:
<div ng-model="work.dt[0]" openhours-day="Sun" openhours-active="active" openhours-from="from" openhours-to="to"></div>
<div ng-model="work.dt[1]" openhours-day="Mon" openhours-active="active" openhours-from="from" openhours-to="to"></div>
<div ng-model="work.dt[2]" openhours-day="Tue" openhours-active="active" openhours-from="from" openhours-to="to"></div>
{{work}}
And Controller:
$scope.work={
dt:[]
};
The problem that I am facing is, scope work is never updated whatever I type on input box, or even if click-unclick checkbox. It remain unchanged as: {"dt":[]}
ng-model is for input fields. So you're passing it in but you weren't really using it for anything. Also you are reading the attributes passed in using = but perhaps you meant to use #. I've created a plunkr demonstrating how you could get this working.
Here's the directive:
.directive('openhoursDay', function() {
return {
scope: {
model:"=",
openhoursDay:"#",
openhoursActive: "#", //import referenced model to our directives scope
openhoursFrom: "#",
openhoursTo: "#"
},
templateUrl: 'open_hours.html',
link: function(scope, elem, attr, ctrl) {
scope.model = {};
scope.model.day = scope.openhoursDay;
scope.model.active = scope.openhoursActive;
scope.model.open = scope.openhoursFrom;
scope.model.close = scope.openhoursTo;
}
}
})
The template:
<div >
<span>{{model.day}}</span>
<input type="checkbox" ng-model="model.active"/>
<input type="text" ng-model="model.open"/>
<input type="text" ng-model="model.close"/>
<br>
</div>
HTML:
<div model="work.dt[0]" openhours-day="Sun" openhours-active="active" openhours-from="from" openhours-to="to"></div>
<div model="work.dt[1]" openhours-day="Mon" openhours-active="active" openhours-from="from" openhours-to="to"></div>
<div model="work.dt[2]" openhours-day="Tue" openhours-active="active" openhours-from="from" openhours-to="to"></div>
work:{{work}}
And Controller:
.controller('MainController', ['$scope', function($scope){
$scope.work={
dt:[]
};
}])
You have to pass the ng-model attribute to the isolated scope, and then, use it in the template as following:
.directive('openhoursDay', function() {
return {
scope: {
openhoursDay: "=",
openhoursActive: "=", //import referenced model to our directives scope
openhoursFrom: "=",
openhoursTo: "=",
ngModel: "=" // Here is the ng-model
},
template: '<div ><span>{{openhoursDay.day}}</span><input type="checkbox" ng-model="ngModel.openhoursDay.active"/><input type="text" ng-model="ngModel.openhoursDay.open"/><input type="text" ng-model="ngModel.openhoursDay.close"/><br> </div>',
link: function(scope, elem, attr, ctrl) {}
};
})
I have created a Plunkr which simulates your situation. You could check it out.
Here's Fiddle Link
How can i watch for change in a directive? In this fiddle example using $translate to translate the content. Everything getting changed except the content in Directive.
HTML looks like this-
<div ng-app='demo'>
<div name="info" ng-controller="myctrl">
<label translate="TERMS_LABEL"></label>
<h4 translate="ZIPCODE_LABEL"></h4>
<p translate="LAST_NAME"></p>
<terms-conditions conditions="TERMS_CONDITIONS" checked="checked"></terms-conditions>
<button type="submit" ng-click="changeLanguage('de')" >Spanish</button>
<button type="submit" ng-click="changeLanguage('en')" >English</button>
</div>
directive looks like
demo.directive("termsConditions",['$translate',function($translate){
return {
restrict:"E",
scope:{
checked:'='
},
link: function(scope, element, attr) {
$translate(attr.conditions)
.then(function (translatedValue) {
scope.conditions = translatedValue;
});
},
template:
"<div class='terms row'><span class='col-md-12'>{{conditions}}</span></div><br><input
type='checkbox' ng-model='checked'><span>Yes, I agree to the terms and condtions</span>"
}
}]);
Is there a reason you can't translate in the template like so?
http://jsfiddle.net/UGLjh/75/
demo.directive("termsConditions",['$translate',function($translate){
return {
restrict:"E",
scope:{
checked:'='
},
link: function(scope, element, attr) {
attr.$observe('conditions', function (untranslatedValue) {
scope.conditions = untranslatedValue;
});
},
template:
"<div class='terms row'><span class='col-md-12'>{{conditions | translate}}</span></div><br><input type='checkbox' ng-model='checked'><span>Yes, I agree to the terms and condtions</span>"
}
}]);
If you know that your attribute won't be interpolated need not use $observe; just stick it on the scope like so:
link: function(scope, element, attr) {
scope.conditions = attr.conditions;
},
I have a controller AppCtrl as
scope.transaction = {}
The index looks like
<div class="control-group">
<label class="control-label">Date</label>
<div class="controls">
<div class="control-group input-append date form_datetime">
<date-time-picker data-ng-model="transaction.date"></date-time-picker>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Amount</label>
<div class="controls">
<div class="input-append">
<input type="text" name="transactionAmount" ng-model="transaction.amount" required>
</div>
and my custom directive looks like
angular.module('customDirectives', []).directive('dateTimePicker', function() {
return {
restrict: 'E',
replace: true,
scope: {
transaction['date']: '=' # COMPILATION ERROR HERE
},
template: '<div class="control-group input-append date form_datetime">'+
'<input type="text" readonly data-date-format="yyyy-mm-dd hh:ii" name="transactionDate" ng-model="transaction.date" data-date-time required>'+
'<span class="add-on"><em class="icon-remove"></em></span>'+
'<span class="add-on"><em class="icon-th"></em></span>'+
'</div>',
link: function(scope, element, attrs, ngModel) {
var input = element.find('input');
element.datetimepicker({
format: "yyyy-mm-ddThh:ii:ssZ",
showMeridian: true,
autoclose: true,
todayBtn: true,
pickerPosition: 'bottom-left'
});
element.bind('blur keyup change', function(){
console.log('binding element');
scope.$apply(date);
});
function date() {
console.log('setting date',input.val());
scope.ngModel = input.val();
}
date(); // initialize
}
}
});
I want to assign the date value from my directive to $scope.transaction.date but it is failing as compilation error, how can I achieve this?
scope: {
transaction['date']: '=' # COMPILATION ERROR HERE
},
Should be
scope: {
transactionDate: '='
},
And
<date-time-picker data-ng-model="transaction.date"></date-time-picker>
Should be
<date-time-picker transaction-date="transaction.date"></date-time-picker>
Then within your directive you can call scope.transactionDate = myValue;
within scope.$apply();
EDIT: If you want to use ng-model within your directive then you can use
....
restrict: 'E',
require: '?ngModel',
....
And
controller.$setViewValue(value); //this will in directive code where you want set the value of the ng-model bound variable.
In Html
<date-time-picker data-ng-model="transaction.date"></date-time-picker>