We Keep Coding

How I can prepand an html tag before an element

I have a page Initially with buttons and then a table (ag-grid).
<div class="row"> <-- Button -->
<button class="btn btn-sm btn-primary"
</button>
</div>
<div class="" ag-grid="ag_grid_options" ></div> <!-- Table-- >
I want to create a directive (a button which does something), which is alligned with the above button.
I have created this directive:
app.directive('exportData', function(){
return {
restrict: 'A',
template: '<button class="btn btn-sm btn-primary"> GOD IS HERE </button>',
link: function(scope) {
}
};
});
and I have modified the tag for ag-grid-option to something like this:
<div class="" ag-grid="ag_grid_options" export-data></div>
But the button comes in new line instead of alligning with the previous button. So my question is, Is there a way to prepand the button with the previous button?
I have requirement of using this as attribute only of ag-grid. Can anyone please help me here.

Try something like this:
app.directive('exportData', function(){
return {
restrict: 'A',
link: function(scope, element, attrs, model){
element.parent().prepend('<button class="btn btn-sm btn-primary"> GOD IS HERE </button>');
};
}
});
A better solution can be to create a wrapper:
app.directive('exportData', function(){
return {
restrict: 'A',
link: function(scope, element, attrs, model){
// Create a wrapper
var wrapper = $('<div class="wrapper"></div>');
element.wrap(wrapper);
// Compile and attach the button
var button = $('<button class="btn"> GOD IS HERE </button>');
element.before(button);
};
}
});

Angular Directive with Reset functionality

I have a directive called filterButton, which will let user to select the filter option and add the check mark on the right. Now I have a reset button in filter.html. Once the user click the reset button, all the filter field will set back to default. I had tried couple methods, it didn't work. Any suggestion? Thank you in advance.
app.js
app.directive('filterButton', function () {
return {
restrict: 'EA',
templateUrl: 'template/filter-button.html',
replace: true,
scope: {
list: '=', //two-way binding
selected: '=', //two-way binding
field: '#', //one-way binding
},
link: function ($scope) {
$scope.selected = [];
$scope.setSelectedOption = function() {
var id = this.option.id;
if(_.contains($scope.selected, id)) {
$scope.selected = _.without($scope.selected, id)
} else {
$scope.selected.push(id);
}
return false;
};
$scope.isChecked = function(id) {
if(_.contains($scope.selected, id)) {
return "fa fa-check pull-right-selected";
}
return "";
};
}
}
});
filter-button.html
<div class="row filter-item">
<div class="btn-group" dropdown is-open="{open: open}">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">Fiter By {{field}} <span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu">
<li data-ng-repeat="option in list" class="dropdown-btn"> <a data-ng-click="setSelectedOption()">{{option.name}}<span data-ng-class="isChecked(option.id)"></span></a></li>
</ul>
</div>
filter.html
<filter-button list="statusList" selected="selectedStatus" field="Status" popover="Error Customer? or No Error Customer?" popover-trigger="mouseenter"></filter-button>
<filter-button list="systemList" selected="selectedSystemType" field="System Type" popover="N+1 or Stand alone?" popover-trigger="mouseenter"></filter-button>
<filter-button list="customerFilterList" selected="selectedCustomer" field="Customer" popover="Male or Female?" popover-trigger="mouseenter"></filter-button>
<div class="row filter-item">
<div class="filter-label">
<button class="btn btn-primary">Reset</button>
</div>
</div>

You can reinitialize the selected arrays on the reset click button:
<button class="btn btn-primary" ng-click="reset()">Reset</button>
In you controller:
$scope.reset = function() {
$scope.selectedStatus = [];
$scope.selectedSystemType = [];
$scope.selectedCustomer = [];
}

Directive doesn't work in Popup Angular

I have created an angular directive.
The goal of my directive is to change text of the button that is being clicked.
My problem is that my directive is working with all the buttons of the first/main page, but when I display a popup in my <div ui-view></div> that has a button with this directive, it doesn't work.
app.directive('callbutton', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<button type="button" class="btn btn-block btn-lg btn-success"><i class="fa fa-phone"></i> Call</button>',
link: function(scope, elem, attrs) {
elem.bind("click", function{
elem.text('other text');
})
}
}
});
Thanks in advance.

Displaying updated address from the scope variable using the directive

I have a directive called DisplayAddress which takes in the address .I am using the isolalted scope and the Code performs the checking if the addres fields are blank or not and builds the Object whihc i am displaying it on the view
I have put the View in the code But now the problem arises when i use the one way binding the code throws error with parse string having error:syntax
Syntax Error .
return {
templateUrl: () => {
return "/app/Templates/Common/DisplayAddress"
},
restrict: "E",
replace: true,
scope: {
address: '='
},
controller: "DisplayAddressController",
controllerAs: "vm"
}
<div>
<div class="m-space">
<i class="fa fa-map-marker"></i>
<span data-ng-if="address.AddressType" data-ng-bind="address.AddressType"></span>
<span>{{vm.addressToString()|| ""}}</span>
</div>
<div class="row-m-box">
<span class="m-box" data-ng-if="address.Phone1"><i class="fa fa-phone"></i> <span class="label-content" data-ng-bind="address.Phone1"></span></span>
<span class="m-box" data-ng-if="address.Phone2"> <i class="fa fa-phone"></i> <span class="label-content" data-ng-bind="address.Phone2"></span></span>
<span class="m-box" data-ng-if="address.Fax"> <i class="fa fa-fax"></i> <span class="label-content" data-ng-bind="address.Fax"></span></span>
<span class="m-box" data-ng-if="address.Email"> <i class="fa fa-envelope"></i> <span class="label-content" data-ng-bind="address.Email"></span></span>
</div>
I want to make this directive with least number of watchers and single way bind .what can i do to make this directive a quality code

Sending value to nested element in angular

I have the following HTML to make an accordion:
{{isExpandAllOpen}} // Present in the scope of the calling page
<li class="row" ng-repeat="test in AllTests">
<div vh-accordion-group panel-class="panel-info">
<div vh-accordion-header> </div>
<div vh-accordion-body> </div>
</div>
</li>
In vhAccordionHeader.js we have the following code:
home.directive("vhAccordionHeader", ['version', function(version) {
return {
require: '^vhAccordionGroup',
replace: true,
restrict: 'EA',
transclude: 'element',
templateUrl: "JS/HomeModule/Directives/vhAccordion/vhAccordionHeader.html?v=" + version
};
}]);
home.directive("vhAccordionAssignId", function() {
return {
require: '^vhAccordionGroup',
link: function(scope, element, attrs, vhAccordionGroupController) {
scope.isOpen = true;
}
};
});
in AccordionHeader.html
<div class="panel-heading">
<h4 class="panel-title">
<a ng-click="isOpen = !isOpen" data-toggle="collapse" onclick=" return false; " vh-accordion-assign-id>
<i class="pull-left glyphicon" ng-class="{'glyphicon-chevron-up': isOpen, 'glyphicon-chevron-down': !isOpen}" style="margin: -2px 10px 0 0"></i><span ng-transclude></span>
</a>
</h4>
the isOpen variable controls the expand/collapse all functionality.
Since I want to implement a expand/collapse all functionality, using the isExpandAllOpen to be equal to IsOpen, when expanding all button is used.
I cannot find a way to assign isExpandAllOpen to isOpen as it is a diferent directive.
TIA

As you don't specify isolated scope for your vhAccordionAssignId directive you an get access to isExpandAllOpen via scope inheritance. Simply read scope.isExpandAllOpen. Mind that scope inheritance will work for reading only.
Now you want to be notified when it got changed? Put a watcher in your link function
scope.$watch('isExpandAllOpen', function(newVal){
scope.isOpen = newVal;
//do additional stuff if required
});