Hi All,
I have a crerated page and I created 3 widgets in that page now I want to refresh the particular widget when I click on the search button
You need to use events to communicate between the widgets , below is an example of what you are looking. the below code will refresh the second widget based on button click of first widget:
you need add the same in your existing widgets .
Widget #1:
Create two buttons that upon click, will $broadcast an event called “customEvent” and pass an object.
HTML:
|
1
2
3
4
|
<div class="panel panel-default panel-body m-t m-b">
<button class="btn btn-default" ng-click="c.clickButton('Cancel')">Cancel</button>
<button class="btn btn-primary" ng-click="c.clickButton('Submit')">Submit</button>
</div>
|
Client Script:
|
1
2
3
4
5
6
7
8
9
10
|
function($rootScope) {
var c = this;
c.clickButton = function(action) {
var obj= {
action: action,
something: "anything else"
};
$rootScope.$broadcast('customEvent', obj);//triggger custom event with params
}
}
|
Widget #2:
Listen for the “customEvent” event, and when triggered, the callback function will update the text.
HTML:
|
1
2
3
4
5
6
7
8
|
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Results</h4>
</div>
<div class="panel-body">
{{c.text}}
</div>
</div>
|
Client Script:
|
1
2
3
4
5
6
7
|
function($rootScope) {
var c = this;
c.text = "Hello";
$rootScope.$on('customEvent', function(event,obj) {
c.text = "You clicked "+obj.action;// listener for the event
spUtil.update($scope);//To refresh the widget
});
}
|
The final results should look like this:
