Here i created sample program using angularJs directive and controller, in directive i m created some attributes like (print-Display="true" is-Silent="false" is-Authentication="false" is-Download="false"), how to get this attribute values while using submit button (Controller)
Thanks in advance
var app = angular.module('myApp', []);
app.directive('telPrint', ['$http',
function($http) {
return {
restrict: 'AEC',
require: 'ngModel',
scope: {
ngModel: '=',
printDisplay: '#',
canShow: '#',
isChecked: '#',
isAuthentication: '#',
isDownload: '#',
},
template: '<span > <input type="checkbox" name="ngModel" ng-checked="checked"> <label > Print </label></span> ',
controller: function($scope, $rootScope) {
$scope.printOption = [];
$scope.Authentication = $scope.isAuthentication;
$scope.Silent = $scope.isSilent;
$scope.Download = $scope.isDownload;
},
link: function(scope, iElement, iAttrs, ngModelController) {
var labelName = iAttrs.getString;
var labelName = labelName.split(",");
var language = labelName[0]; // Language EN or Fr
var fieldlabelName = labelName[1]; // Label Name
var fieldmoduleName = labelName[2]; // Module Name (global or local)
if (iAttrs.isSilent == "true") {
scope.checked = true;
} else if (iAttrs.isSilent == "false") {
scope.checked = false;
}
console.log(iAttrs.printDisplay)
}
};
}
])
app.controller('myCtrl', function($scope) {
$scope.printcontr = function() {
console.log("Inside ")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="row col-sm-12">
<div class="col-sm-12">
<tel-Print ng-model="taxmaster.print" get-string="lbl,print,common" print-Display="true" is-Silent="true" is-Authentication="false" is-Download="true"></tel-Print>
</div>
<div>
<div class="col-sm-12">
</div>
<div class="col-sm-12">
<input type="submit" value="Save" ng-click="printcontr()" />
</div>
</div>
</body>
By scope.$parent, you can access $scope of the controller:
var app = angular.module('myApp', []);
app.directive('telPrint', ['$http',
function($http) {
return {
restrict: 'AEC',
require: 'ngModel',
scope: {
ngModel: '=',
printDisplay: '#',
canShow: '#',
isChecked: '#',
isAuthentication: '#',
isDownload: '#',
},
template: '<span > <input type="checkbox" name="ngModel" ng-checked="checked"> <label > Print </label></span> ',
controller: function($scope, $rootScope) {
$scope.printOption = [];
$scope.Authentication = $scope.isAuthentication;
$scope.Silent = $scope.isSilent;
$scope.Download = $scope.isDownload;
},
link: function(scope, iElement, iAttrs, ngModelController) {
var labelName = iAttrs.getString;
var labelName = labelName.split(",");
var language = labelName[0]; // Language EN or Fr
var fieldlabelName = labelName[1]; // Label Name
var fieldmoduleName = labelName[2]; // Module Name (global or local)
if (iAttrs.isSilent == "true") {
scope.checked = true;
} else if (iAttrs.isSilent == "false") {
scope.checked = false;
}
console.log(iAttrs.printDisplay);
// Set data
scope.$parent.language = labelName[0];
scope.$parent.fieldlabelName = labelName[1];
scope.$parent.fieldmoduleName = labelName[2];
}
};
}
])
app.controller('myCtrl', function($scope) {
$scope.printcontr = function() {
console.log("Inside ");
//Retrive data
console.info('language=', $scope.language);
console.info('fieldlabelName=', $scope.fieldlabelName);
console.info('fieldmoduleName=', $scope.fieldmoduleName);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="row col-sm-12">
<div class="col-sm-12">
<tel-Print ng-model="taxmaster.print" get-string="lbl,print,common" print-Display="true" is-Silent="true" is-Authentication="false" is-Download="true"></tel-Print>
</div>
<div>
<div class="col-sm-12">
</div>
<div class="col-sm-12">
<input type="submit" value="Save" ng-click="printcontr()" />
</div>
</div>
</div>
</body>
I would suggest if you have a need to fetch directive attributes inside parent controller then while defining directive's scope instead of using '#', use '=' (two way binding) so that whatever you will be changing any attribute in the directive, you will always have those values in the parent controller.
app.directive('telPrint', ['$http',
function($http) {
return {
restrict: 'AEC',
require: 'ngModel',
scope: {
ngModel: '=',
printDisplay: '=',
canShow: '=',
isChecked: '=',
isAuthentication: '=',
isDownload: '=',
}...
Related
Below is the dynamic directive (it is called in blade.php file)
<div class="col l3 learners-selection-block" id="learners-selection-block">
<dropdown-list
data-name="Learner Type"
data-label="Select Leraner Type"
data-provider='{"adult_learner":"adult Learner","young_learner":"Younge Learner","parent_learner":"Parent Learners"}'
data-provider-search=""
data-provider-type="dataset"
data-class="learner-type-list"
data-id="learner-type-list"
data-search="yes"
data-multiple="yes"
data-keyword="learner-type"
data-model-name="learnertype"
data-obj-name="learnertype"
></dropdown-list>
</div>
<div class="col l3 learners-selection-block" id="learners-selection-block">
<dropdown-list
data-name="Learner"
data-label="Select Learner"
data-provider="getCompanyLearnersList"
data-provider-search="searchNewCompanyLearnersList"
data-provider-type="function"
data-class="select-learner-list"
data-id="select-learner-list"
data-search="yes"
data-multiple="yes"
data-keyword="learner"
data-model-name="learner"
data-obj-name="learner"
></dropdown-list>
</div>
<-- below is the html code that will place on the above directive -->
<div>
<li ng-repeat="record in list_all_records" class="selection-list perf-elem" data-item-id="<%record.id%>" ng-if="search_key == undefined || search_key == '' || record.search_word.toLowerCase().indexOf(search_key) != -1">
</div>
<-- below is the js code to create multiple directive -->
app.directive('dropdownList', ['$filter', function($filter){
return
{
restrict: 'E',
templateUrl: 'js/controllers/get-drop-down-list.html',
transclude: true,
scope: {
main_label: '#',
},
link: function(scope, element, attrs, controller) {
scope.main_label = attrs.name;
scope.select_label = attrs.label;
scope.css_class = attrs.class;
scope.css_id = attrs.id;
scope.label_keyword = attrs.keyword;
scope.list_all_records = attrs.arrayName;
},
controller: function($rootScope, $scope, $http, $attrs, $parse) {
}
}
});
Above code will create two drop down list.
But "list_all_records" in ng-reapet remain same for all drop down
I want to change it "learnertype" on the place of "list_all_records" in first drop down
And I want to change it "learner" on the place of " "list_all_records" in second drop down" in second drop down
So that I can print different-different data in learnertype and in learner
How do I achieve this modification.
I tried and found a code. that is below and it is working for me well.
<dropdown-list
data-name="User Name"
data-label="Please Select"
required ng-model="user_id"
items="user_list"
main-list="main_user_list"
></dropdown-list>
<dropdown-list
data-name="Product Name"
data-label="Please Select"
required ng-model="product_id"
items="product_list"
main-list="main_product_list"
></dropdown-list>
Below Is the Html Code
<div>
<li ng-repeat="record in items" class="selection-list perf-elem" data-item-id="<%record.id%>" ng-if="search_key == undefined || search_key == '' || record.title.toLowerCase().indexOf(title) != -1">
Below is the directive code
app.directive('dropdownList', ['$filter', function($filter){
return{
restrict: 'E',
templateUrl: '/drop-own.html',
transclude: true,
scope: {
items: '=',
ngModel: '=',
mainList: '=',
},
link: function(scope, element, attrs) {
scope.main_label = attrs.name;
},
controller: function($rootScope, $scope, $http, $attrs, $parse) {
}
}
});
Finally declare your all dynamic directive variable in controller as you have added in directive
app.controller('userController', function ($rootScope, $scope, $http, $window, $mdDialog)
{
$scope.user_list = [];
$scope.main_user_list = [];
$scope.user_id = [];
$scope.product_list = [];
$scope.main_product_list = [];
$scope.product_id = [];
});
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
I tried to make recursive directive like here
Angularjs: understanding a recursive directive
ng-switch options are all commented, ng-if works fine.
I don't know what is a problem.
Just inspect output of ng-switch
var module = angular.module('myapp', []);
module.controller("TreeCtrl", function($scope) {
$scope.controls = [
{
"label":"Checkbox",
"type":"checkbox"
},
{
"label":"input",
"type":"input"
},
{
"label":"Some group",
"type":"Group",
"controls":[
{
"label":"subcontrol",
"type":"input"
}
]
}
];
});
module.directive("tree", function($compile) {
return {
restrict: "E",
scope: {controls: '='},
template:
'<div ng-switch="control.type">' +
'<label>{{control.label}}</label>'+
'<div ng-switch-when="input"><input type="text" name="ctrl1"></input></div>'+
'<div ng-switch-when="checkbox"><input type="checkbox" "name="ctr2"></input></div>'+
'<div ng-repeat="subcontrol in control.controls">' +
'<tree control="subcontrol"></tree>' +
'</div>' +
'</div>',
compile: function(tElement, tAttr, transclude) {
//We are removing the contents/innerHTML from the element we are going to be applying the
//directive to and saving it to adding it below to the $compile call as the template
var contents = tElement.contents().remove();
var compiledContents;
return function(scope, iElement, iAttr) {
if(!compiledContents) {
compiledContents = $compile(contents, transclude);
}
compiledContents(scope, function(clone, scope) {
iElement.append(clone);
});
};
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="TreeCtrl">
<div ng-repeat='control in controls'>
<tree control="control"></tree>
</div>
</div>
</div>
How i can parse html in directive template???
app.directive('user', function(){
return {
restrict: 'E',
scope: false,
template: '<div class="clearfix buttons-container" ng-bind-html-unsafe="current_text"></div>'
}
});
//in controller
$scope.current_text = 'Hello <strong>'+current_username+'</strong> !!!'
use $sce.trustAsHtml. this method will create trusted HTML object for ng-bind-html directive.
$sce.trustAsHtml Docs
See below example
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $sce) {
var current_username = "User";
var html = 'Hello <strong>' + current_username + '</strong> !!!';
$scope.current_text = $sce.trustAsHtml(html);
});
app.directive('user', function() {
return {
restrict: 'E',
scope: false,
template: '<div class="clearfix buttons-container" ng-bind-html="current_text"></div>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<user></user>
</div>
</div>
you can do this using isolate-scope
in this way.
app.directive('user', function(){
return {
restrict: 'E',
scope: {
current_text : '#current_text'
},
template: '<div class="clearfix buttons-container" ng-bind-html-unsafe="current_text"></div>'
}
});
//in controller
$scope.currenText = 'Hello <strong>'+current_username+'</strong> !!!'
<div current_text="currenText" > </div> // your directive included here
I have a single controller
module.controller('MyCtrl', function() {
this.message = 'Hello';
this.method = function() {
return this.message;
};
});
module.directive('MyDirective', function() {
return {
restrict: 'A',
scope: {
argument: '=',
method: '&'
},
link: function(scope, el, attrs) {
console.log(scope.argument); //undefined!
scope.method(); // undefined
}
};
});
the template
<div data-ng-controller="MyCtrl as ctrl">
<p data-ng-bind="ctrl.message"></p> <!-- Works! -->
<p data-ng-bind="ctrl.method()"></p> <!-- Works too! -->
<div data-my-directive data-method="ctrl.method" data-argument="ctrl.message">
</div>