Please help me, my case here is that I want to add the ATCWhatsapp OnClick Button function so that the second track event can be tracked simultaneously, that's about it.
<script>
function ATCWhatsapp(){
fbq('track', 'AddToCart');
fbq('track', 'Purchase',{value: 350.000, currency: 'MYR'});
fbq('track', 'KlikWA');
};
</script>
Related
I’m hoping there are some Angular 1.x experts who can show me what I’m doing wrong. I have a simple function to update which of 3 buttons in a “tab group” is the current one. This function is called whenever any of the buttons is clicked.
$scope.updateFilter = function (type, value) {
// Additional unrelated code here ...
document.getElementsByClassName('active')[0].className = document.getElementsByClassName('active')[0].className.replace(' active', '');
document.getElementById('tabButton_' + value).className += ' active';
$scope.$apply();
};
The background color of the current button is indeed highlighted but only AFTER one clicks elsewhere on the screen. In other words, it’s not updated instantly like it should.
Any ideas how to correct this?
It's hard to diagnose the issue without seeing some more code or a reproduction of your existing issue. However, from the above, you are certainly not doing the "angularjs" way. A more angular approach would be to use bindings and update the model as the user clicks different button options. A very basic (and ugly styled) example:
angular.module('myApp', [])
.controller('MainController', function () {
var self = this;
self.$onInit = function $onInit() {
// These will be ng-repeated over for the example
self.buttons = [
'Option 1',
'Option 2',
'Option 3'
];
// This is the model binding that will drive the active style
self.activeIndex = 0;
};
self.setActiveIndex = function setActiveIndex(index) {
// This is called on button click and updates the model used
// for the active button styling
self.activeIndex = index;
};
});
.active {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!-- repeat the buttons. when clicked, call controller method to update model's active index -->
<div ng-app="myApp" ng-controller="MainController as $ctrl">
<button ng-repeat="b in $ctrl.buttons" type="button" ng-class="{active: $ctrl.activeIndex===$index}" ng-click="$ctrl.setActiveIndex($index)">{{::b}}</button>
</div>
Take aways:
You probably shouldn't be doing DOM manipulation. Use existing directives and model binding, else you are losing many of the benefits you are supposed to get from angularjs.
Don't call $scope.$apply(). Angular will do this for you if you are using an ng-click in your template (which you probably should instead of building the event listeners yourself).
I'm basically trying to figure out how to do a certain event listener within an angular controller. More specifically, when a bootstrap modal is dismissed I would like to fire a function within the angular controller. In jquery you can normally do something like:
$(.some-class).on('click', function() {
// do something
});
What i have is a side navigation with images as buttons. I have gray buttons for when they're inactive and red buttons when they're active. Each button launches a bootstrap modal.
I'm using:
<a type="button" data-toggle="modal" data-target="#overview" ng-click="launchOverview()">
<img ng-src="{{ sideNavActive.overviewSrc }}" /><br />
</a>
and I have an object in my controller:
$scope.sideNavActive = {
"overviewSrc": "img/side-nav/tab-overview-off.png",
"detailsSrc": "img/side-nav/tab-details-off.png",
"contactSrc": "img/side-nav/tab-contact-off.png"
}
When the user clicks one of the side-nav buttons i have an ng-click function that changes the button to "img/...-on.png" so the button turns red (active). When the user clicks another side-nav button it turns that button red and the rest gray.
What I'm trying to do is when the user clicks in the faded area around the modal to dismiss it, i also want the buttons to all reset to gray. According to the bootstrap documentation I should be able to fire a function on the 'hidden.bs.modal' event but I can't get it to work in my angular controller. I have the following function where '#overview' is my id for my modal.
$('#overview').on('hidden.bs.modal', function() {
console.log('function fired!!!!!🔥');
$scope.sideNavActive = {
"overviewSrc": "img/side-nav/tab-overview-off.png",
"detailsSrc": "img/side-nav/tab-details-off.png",
"contactSrc": "img/side-nav/tab-contact-off.png"
}
})
However, this function doesn't fire when the modal is dismissed and I can't figure out why.
One thing I've done to see if the function is actually listening is changed it to:
$('body').on('click', function() {
// function code here
}
and it works. It fires whenever I click anywhere since it's listening on the 'body' element. So I know it's listening but for some reason the 'hidden.bs.modal' event isn't working.
I would use the angular-ui-bootstrap modal if you're not already: http://angular-ui.github.io/bootstrap/#!#modal. There is a callback function on the modal instance that is executed when the modal is dismissed:
modalInstance.result.then(function (someObj) {
// success
}, function () {
// this code will be executed when the modal is dismissed
console.log('Modal dismissed at: ' + new Date());
});
Figured out how to fire a function in an angular controller when modal is dismissed.
angular.element(document).find('.modal').on('hidden.bs.modal', function(){
// do something
console.log('function fired');
});
I have a timer that would re-submit the page at intervals. Is there an angular way to do that?
Right now I was just submitting the form inside a script:
<script type="text/javascript" defer="defer">
window.setTimeout( function () {
document.getElementById( "srchForm" ).submit();
}, 300000 ); //5 min
</script>
<form id="srchForm" ng-controller="OutageViewController" ng-submit="loadData(0)">
<p id="div_srchForm"> ....</p>
<button id="btnReload" type="submit" >Submit</button>
</form>
but it would give me 404 error status:
404 - File or directory not found.
The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable
Use $interval service to schedule a function for repeated execution with a time interval in between.
Example that used the $interval service to schedule a function call every 3 seconds:
var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope, $interval) {
$scope.loadData = function() {
console.log("loadData - Interval occurred");
};
$interval(function() {
$scope.loadData();
}, 3000);
});
<form id="formX" ng-controller="MainCtrl" ng-submit="loadData(0)">
<p id="div_srchForm"> ....</p>
<button id="btnReload" type="submit">Submit</button>
</form>
https://plnkr.co/edit/yqMW9ZENoqZwfDtqlsTy
I would rather ask why you are trying to simulate a button click in the first place. As others have hinted at, browser automation as a user experience is typically a poor choice and reflects poor organization in your software design. I would recommend using the $timeout already available in Angular to do this from the controller instead. Not only does this put your front end logic where it belongs,in the controller, but also gives you a clean teardown mechanism so your timer doesn't continue I run if the controller isn't active (and prevents you from writing another hack to mitigate that).
I have found a non-Angular way to work around to get to the ng-submit handler:
Looks like I cannot call form.submit in the callback. When I did that, they can't "see" ng-submit and it lost me where the call has taken me when it complained not finding "resources" which is the page itself! My work-around to connect to the ng-submit is,
Now instead of doing form.submit in the callback, I click the submit button which is just primitive js but it did the job!
<script type="text/javascript" defer="defer">
window.setTimeout( function () {
document.getElementById( "btnReload" ).click();
//window.location.reload();
}, 300000 ); //5 min
</script>
The button activated ng-submit because of the way the scope of submit was set up. Just don't ask me why clicking the button is working but form-submitting is not working!
After all, I still want to know the Angular Way to do it, not my primitive js !!
I'm trying to making some custom elements with AngularJS's and bind some events to it, then I notice $scope.var won't update UI when used in a binding function.
Here is a simplified example that describing the probelm:
HTML:
<!doctype html>
<html ng-app="test">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl2">
<span>{{result}}</span>
<br />
<button ng-click="a()">A</button>
<button my-button>B</button>
</div>
</body>
</html>
JS:
function Ctrl2($scope) {
$scope.result = 'Click Button to change this string';
$scope.a = function (e) {
$scope.result = 'A';
}
$scope.b = function (e) {
$scope.result = 'B';
}
}
var mod = angular.module('test', []);
mod.directive('myButton', function () {
return function (scope, element, attrs) {
//change scope.result from here works
//But not in bind functions
//scope.result = 'B';
element.bind('click', scope.b);
}
});
DEMO : http://plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview
Basicly, I bind click event to my-button and want to change $scope.result when user clicked button B (similar to ng-click:a() on button A). But the view won't update to the new $scope.result if I do this way.
What did I do wrong? Thanks.
Event handlers are called "outside" Angular, so although your $scope properties will be updated, the view will not update because Angular doesn't know about these changes.
Call $scope.$apply() at the bottom of your event handler. This will cause a digest cycle to run, and Angular will notice the changes you made to the $scope (because of the $watches that Angular set up due to using {{ ... }} in your HTML) and update the view.
This might be also a result of different problem but with the same symptoms.
If you destroy a parent scope of the one that is assigned to the view, its changes will not affect the view in any way even after $apply() call. See the example - you can change the view value through the text input, but when you click Destroy parent scope!, model is not updated anymore.
I do not consider this as a bug. It is rather result of too hacky code in application :-)
I faced this problem when using Angular Bootstrap's modal. I tried to open second modal with scope of the first one. Then, I immediately closed the first modal which caused the parent scope to be destroyed.
use timeout
$timeout(function () {
code....
},
0);
Can you please tell me how to get click event of button? Actually button click event does not fire.
Here is plunker
http://plnkr.co/edit/cqmwJc5dpoDWvai4xeNX?p=preview
var loginCntrl=function($scope){
$scope.testClick =function(){
alert('sss');
}
}
You are making a simple mistake by not including ng-controller. Change it as follows. It will work.
<div ng-app="firstApp" ng-controller="loginCntrl">
<ui-view name="test"></ui-view>