I have the following div:
<div style="font-size:15px;" class="title">
<div>{{specialOffer.Name}}</div>
</div>
I need to execute a JS function after {{specialOffer.Name}} is replaced with its value. Sorry, I'm an Angular newbie, trying to solve some bugs on an existing code.
I tried $(document).ready or window.onload, but these events get fired too quickly.
You can do that this way: Its one possibility and It is good to be inside directives while talking about rendering.
angular.module('myApp',[])
.directive('afterRender', function() {
return {
scope: {
cb: '&'
},
link: function($scope, element, attrs) {
var watch = $scope.$watch(function() {
}, function() {
// Runs after rendered
$scope.$evalAsync(function() {
$scope.cb();
});
});
},
};
})
.controller('myCtrl',function($scope){
$scope.specialOffer = {Name:"Woops!"}
$scope.callMeAfterRender = function(){
alert('Hey I am called :)');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myCtrl'>
<span after-render
cb='callMeAfterRender()'>{{specialOffer.Name}}</span>
</div>Happy Helping!
Try using ng-init, see this
<div style="font-size:15px;" class="title">
<div ng-init="functionName(specialOffer.Name)">
{{specialOffer.Name}}
</div>
</div>
Here's one way to do it.
$scope.$watch('specialOffer.Name', function(newVal, oldVal) {
callYourFunction()
});
Every time specialOffer.Name changes, the callback is ran and the DOM is updated (meaning {{specialOffer.Name}} gets "filled in").
But this has a "code smell" to it. I can't be sure that it's a bad approach without knowing the context, but I'm pessimistic. Check out this to get a better understanding of how data binding works.
Here is the solution.Plese find the same. Here the problem was solved by using angularjs directive post link.
app.directive('afterRender', function () {
return {
link: {
post: function ($scope, elem, attr) {
$timeout(function () {
alert('Data was rendered');
// add your java script code
}, 0);
}
}
};
});
<div ng-app='myApp' ng-controller='myCtrl'>
<span after-render>{{expression}}</span>
</div>
