i have controller has function alerts api , update count on front-end of site bound alert.
unfortunately ng-bind attribute i'm using doesn't seem updating count live, though simple console.log() telling me actual alert count being updated in controller.
front-end
<div class="modeselector modeselector_oneup" data-ng-controller="mylivestockcontroller vm"> <a class="modeselector-mode" data-ui-sref="my-livestock"> <div class="modeselector-type">alerts</div> <img class="modeselector-icon" src="/inc/img/_icons/envelope-black.svg" onerror="this.src=envelope-black.png" /> <span data-ng-bind="vm.alertcount"></span> </a> </div> controller
(function() { 'use strict'; function mylivestockcontroller(userservice) { var vm = this; vm.mylivestocknotification = { isloading: true, haserror: false }; vm.alertsnotification = { isloading: true, haserror: false, hasdata: false }; vm.deletealert = function(id) { vm.currentalert = void 0; vm.alertsnotification.isloading = true; userservice.deletealert(vm.user.id, id).then(function() { // remove alert our array vm.alerts = vm.alerts.filter(function(alert) { return alert.id !== id; }); // refresh alert count user vm.getalerts(vm.user.id); vm.alertsnotification.isloading = false; vm.alertsnotification.haserror = false; }, function() { vm.alertsnotification.haserror = true; }); }; vm.getalerts = function(id) { userservice.getalerts(id).then(function(alertdata) { vm.alertcount = alertdata.length; if (vm.alertcount > 0) { vm.alertsnotification.hasdata = true; } else { vm.alertsnotification.hasdata = false; } vm.alerts = alertdata; vm.alertsnotification.isloading = false; vm.alertsnotification.haserror = false; }, function() { vm.alertsnotification.haserror = true; }); }; // init (function() { userservice.getcurrentuser().then(function(data) { vm.mylivestocknotification.haserror = false; vm.mylivestocknotification.isloading = false; vm.user = data; // alert count user vm.getalerts(vm.user.id); }, function() { vm.mylivestocknotification.haserror = true; }); })(); } angular .module('abp') .controller('mylivestockcontroller', mylivestockcontroller); })(); service
(function() { 'use strict'; function userservice($q, $sessionstorage, $localstorage, $filter, user) { var service = this; service.getalerts = function(id) { var deferred = $q.defer(); user.alerts({ userid: id }, function(response) { if (response.hasownproperty('data')) { // convert dates valid date angular.foreach(response.data, function(alert) { /* jshint camelcase: false */ if (alert.created_at) { alert.created_at = $filter('abpdate')(alert.created_at); /* jshint camelcase: true */ } }); deferred.resolve(response.data); } else { deferred.reject('data error'); } }, function(e) { deferred.reject(e); }); return deferred.promise; }; angular .module('abp') .service('userservice', userservice); })(); as can see, i've got getalerts() function being called every time alert deleted, using deletealert() function, <span data-ng-bind="vm.alertcount"></span> on front-end updates after refreshing page, i'd update live.
your bind not updating because change value of alertcount outside of digest cycle of angular app. when refresh app, digest runs , value gets updated. wrap update of variable in $scope.apply() so:
$scope.$apply(function(){ vm.alertcount = alertdata.length; }); this force digest , update value live.
if have more values updated outside of digest (any callback, promise etc) can force digest cycle calling:
$scope.$apply(); hope helps.
edit -----
given update full code, see not injecting scope anywhere in controller, controllers write start that:
(function () { var app = angular.module('mainmodule'); app.controller('mycontroller', ['$scope', '$myservice', function ($scope, $myservice) { //logic }]); }()); edit -----
here quick go had on code:
(function() { 'use strict'; var app = angular.module('abp'); app.controller('mylivestockcontroller', ['$scope', 'userservice', function($scope, userservice) { var vm = {}; $scope.vm = vm; vm.mylivestocknotification = { isloading: true, haserror: false }; vm.alertsnotification = { isloading: true, haserror: false, hasdata: false }; vm.deletealert = function(id) { vm.currentalert = void 0; vm.alertsnotification.isloading = true; userservice.deletealert(vm.user.id, id).then(function() { // remove alert our array vm.alerts = vm.alerts.filter(function(alert) { return alert.id !== id; }); // refresh alert count user vm.getalerts(vm.user.id); vm.alertsnotification.isloading = false; vm.alertsnotification.haserror = false; }, function() { vm.alertsnotification.haserror = true; }); }; vm.getalerts = function(id) { userservice.getalerts(id).then(function(alertdata) { vm.alertcount = alertdata.length; if (vm.alertcount > 0) { vm.alertsnotification.hasdata = true; } else { vm.alertsnotification.hasdata = false; } vm.alerts = alertdata; vm.alertsnotification.isloading = false; vm.alertsnotification.haserror = false; //important, promise have apply scope update view $scope.$apply(); }, function() { vm.alertsnotification.haserror = true; }); }; // init (function() { userservice.getcurrentuser().then(function(data) { vm.mylivestocknotification.haserror = false; vm.mylivestocknotification.isloading = false; vm.user = data; // alert count user vm.getalerts(vm.user.id); }, function() { vm.mylivestocknotification.haserror = true; }); })(); }]); })(); the general idea is:
- you create app (angular.module)
- you create controller in app, $scope injected
- any values want updated on view, add $scope
- if have $scope updates in callback, event or promise, wrap them in (or follow with) $scope.$apply call
i think should work :)
Comments
Post a Comment