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.
Related
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);
};
}
});
This is the directive with the function that is supposed to be called when clicked.
ebApp.directive('monthDir', function () {
return {
restrict: 'E',
templateUrl: 'htmlFiles/monthDirective.html',
transclude: true,
scope: {
ebObj: "=obj"
},
link: function link(scope, element, attrs, ngModelCtrl) {
scope.removeDir = function (removeVal) {
console.log("asd"); //not showing in the console
}
console.log(scope);
},
controller: function ($scope) {
}
}
})
The ng-click in the following directive is not working. The directive's html
<div class="row monthDirC">
<span class="glyphicon glyphicon-remove-sign pull-right cursorC"
ng-click="removeDir(ebObj.costArray[count])" ></span>
<div class="form-group">
<label for="datepick" class="col-md-6">Select month</label>
<md-datepicker id="datepick" class="col-md-6" ng-model="ebObj.costArray[count].myDate"
md-placeholder="Enter date"
md-min-date="minDate"
md-max-date="maxDate">
</md-datepicker>
</div>
The html that uses the directive:
<div class="col-md-12">
<month-dir ng-transclude ng-repeat="count in ebObj.costArray[0].countArray" obj="ebObj.costArray[count+1]"></month-dir>
</div>
It is working correctly. Make sure you don't have any errors. Try this,
var ebApp = angular.module('ebApp', []);
ebApp.controller('MainCtrl', function($scope) {
$scope.ebObj = 'someVal';
});
ebApp.directive('monthDir', function() {
return {
restrict: 'E',
template: '<div ng-click="removeDir()"><b>Click Me</b><ng-transclude></ng-transclude></div>',
transclude: true,
scope: {
ebObj: '=obj'
},
link: function link(scope, element, attrs, ngModelCtrl) {
scope.removeDir = function (removeVal) {
console.log('asd'); //not showing in the console
}
},
controller: function ($scope) {
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="ebApp" ng-controller="MainCtrl">
<month-dir ebObj="ebObj"><i>Click Me!</i></month-dir>
</div>
Im trying to create a directive for a button with a loading state using Bootstrap 3. When the button is disabled I get some strange style which I can't seem to identify. Below I included my code.
directive.js
function gfkLoadingButton(settings) {
return {
restrict: 'E',
transclude: true,
scope: {
isLoading: "=",
ngClass: "=",
ngStyle: "=",
loadingText: "=",
ngDisabled: '='
}
};
}
template.html
<button class="btn"
ng-class="ngClass"
type="button"
ng-disabled="ngDisabled"
ng-style="ngStyle">
<span ng-show="!isLoading">
<ng-transclude ng-disabled="ngDisabled"></ng-transclude>
</span>
<span ng-show="isLoading">
<i class="fa fa-spinner fa-pulse"></i>
{{loadingText}}
</span>
</button>
usage
<loading-button ng-class="'btn-primary'"
ng-style="{'width': '144px'}"
ng-disabled="addAdjustmentForm.$invalid || state.saving"
is-loading="state.saving"
loading-text="Saving">
<span class="glyphicon glyphicon-plus"></span>
Add Adjustment
</loading-button>
ngDisabled is an expression so it should be ngDisabled: '&' instead of '=', and in your template it should be ng-disabled = "ngDisabled()".
Someone pointed the solution out in the comments but deleted their comment shortly after. Either way, thank you unknown commenter, the solution was really simple. I just needed to include replace: true to the code.
directive.js
function loadingButton(settings) {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
isLoading: "=",
loadingText: "=",
ngDisabled: '='
}
};
}
directive.html
<button class="btn"
type="button">
<span ng-show="!isLoading">
<ng-transclude ng-disabled="ngDisabled"></ng-transclude>
</span>
<span ng-show="isLoading">
<i class="fa fa-spinner fa-pulse"></i>
{{loadingText}}
</span>
</button>
usage
<loading-button ng-class="'btn-primary'"
ng-style="{'width': '143px'}"
ng-disabled="addCalculationForm.$invalid || state.saving"
is-loading="state.saving"
loading-text="'Saving'">
<span class="glyphicon glyphicon-plus"></span>
Add Adjustment
</loading-button>
I'm going to do my best to explain my issue - bear with me.
This whole thing is a directive for file selection:
The directive has an ng-transclude component that contains a few directives, contained in their own divs.
Parent directive:
<div class="extra-cells">
<div ng-transclude class="extra-cells-row"></div>
</div>
ng-transclude content:
<div file-upload-directive>
<div bo-if="config.drive">
<div google-picker>
<div>Google Drive</div>
</div>
</div>
<div bo-if="config.dropbox">
<div dropbox-chooser>
<div>Dropbox</div>
</div>
</div>
<div bo-if="config.link">
<div ng-click="selectLink()">
<div>Paste a link</div>
</div>
</div>
</div>
ng-transclude content(visual):
The click event in the offending (dropbox) directive fires when I click anywhere in the highlighted section.
dropboxChooserModule.directive('dropboxChooser', function(dropboxChooserService) {
return {
priority: 1,
restrict: 'EA',
transclude: true,
scope: {
widget: '=',
options: '=',
extensions: '=',
},
template: '<div class="">' +
'<div ng-transclude></div>' +
'<input type="dropbox-chooser" name="selected-file"/></div>',
link: function postLink(scope, element, attrs) {
element.bind("click", function(event) {
dropboxChooserService.choose({
success: function(files) {},
cancel: function() {}
})
});
},
replace: true
};
});
The question is, naturally, what is causing it to trigger and how do I make it stop. It should trigger only when the element with the dropbox directive is clicked.
Removing the input element inside the directive seems to have "fixed" the problem.
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
});