Hi Guys,
In the below code snippet you can find how to use a directive in order to load more data and generate html.
To do this you have to add to add below code in your html
2. load-item is a directive which has scope ng-data that check if "dataChange" variable value has updated or not.
Coming to the implementation Whenever user click on "Show more" button it checks if there is any updates available.
If it finds any updates, it changes dataChange value. The directive monitors "dataChange" variable and executes its function whenever it is modified. $watch function monitors any modification on scope variable.
You can find implementation code below
In the below code snippet you can find how to use a directive in order to load more data and generate html.
To do this you have to add to add below code in your html
1. UpdateMessage is a placeholder where you can show message dynamically whenever you click on "Show More"
2. load-item is a directive which has scope ng-data that check if "dataChange" variable value has updated or not.
Coming to the implementation Whenever user click on "Show more" button it checks if there is any updates available.
$scope.showNewMessage = function(){
// Call service which checks for update
$scope.dataChange++;
}
If it finds any updates, it changes dataChange value. The directive monitors "dataChange" variable and executes its function whenever it is modified. $watch function monitors any modification on scope variable.
You can find implementation code below
index.html
<html ng-app="simpleDirective"> <head> <script src="angular.min.js"></script> <script src="jquery.js"></script> <script src="app.js"></script> </head> <body style="margin:10;padding:0;"> <div style="margin:0 auto" ng-controller="Controller"> <div id="updatedMessage"></div> <load-item ng-data="dataChange"></load-item> <div style='width: 70%;padding: 10px;background: lightblue;border-radius: 4px;text-align:center;' ng-click="showNewMessage()">Show more</div> </div> </body> </html>
app.js
var app = angular.module('simpleDirective', []);
app.controller('Controller', ['$scope', function($scope) {
$scope.dataChange = 0;
$scope.showNewMessage = function(){
// Call service which checks for update
$scope.dataChange++;
}
}]);
app.directive("loadItem", function(){
return{
restrict:"E",
scope:{
ngData:"="
},
link:function($scope){
$scope.$watch("ngData", function(newValue, oldValue){
$("#updatedMessage").append("<div style="background: lightgrey; border-radius: 4px; height: 130px; margin-bottom: 20px; width: 71.5%;"></div>");
});
}
}
});
Good Day :)
0 Comments