I'm struggling with getting a $scope variable to trigger the screen to rebind. I have attempted calling $scope.$apply() and $digest() after assigning $scope.value = value, but I encounter an error "$rootScope:inprog] $digest already in progress.
To troubleshoot, I tried using my $rootScope.$on('message'function(){}) listener to create a secondary $broadcast to all scopes. However, the registration of the event on my $scope is not firing, which may be related to the same issue...or maybe not. Check out my code below:
Unfortunately, I can't provide a fiddle due to network policy restrictions.
Manifest:
- [config]
- [index.html]
- [foo.html]
- [ctrl]
[config] (a couple of attempted hacks. They're marked with comments)
var kata = angular.module('kata',[
'ngRoute'
]).run(['$rootScope',
function($rootScope){
$rootScope.$on('message:foo',function(event,data){
$rootScope.$broadcast('message:bar',['foo1','foo2','foo3']);//send secondary msg
$rootScope.data = data; //Hack #1: When I couldn't get $scope to rebind, I tried to use $rootScope;still doesn't rebind.
});
}]);
kata.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/Foo',{
templateUrl: 'foo.html',
controller: 'FooCtrl'
});
}]);
[index] (nothing funny here)
<html ng-app="kata">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"></meta>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="./routingConfig.js"></script>
<script src="./controllers.js"></script>
</head>
<body>
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
[foo.html] (nothing funny here) A couple of tests with a couple of $scope variables attached to same stuff. Neither of these update
<div>
This page is for capturing Data
Data: {{data}}
<hr />
<ul>
<li ng-repeat="foo in foos">
<span>Foo Found!</span>
</li>
</ul>
</div>
[ctrl] (created several variables on scope trying to attack this problem in different ways)
var kataCtrl= kata.controller("FooCtrl",
[ '$scope', '$http','$rootScope','$location'
,function($scope, $http, $rootScope , $location) {
$scope.data = "Foo";
$scope.data1 = "[placeholder]";
$scope.foos = [];
//fires, assigns, view does not update
$scope.$watch(function(){
return $rootScope.data;
}, function(){
$scope.foos = ['data','foo','bar','baz'];<=Assignment succeeds. View does not update
$scope.$apply();//<=Does nothing apparent; View does not update
$scope.$digest();//<= Console Error. Already in digest loop
},true);
//does not fire
$scope.$on('message:foo',function(event,data){ //<= This never catches
$scope.data = data;
});
//fires, assigns, View does not update
$rootScope.$on('message:bar',function(event,data){
$scope.foos = ['data','foo','bar','baz'];
$scope.foo1 = data.element1;
$scope.data = "[Foos returned from $rootScope]";
$scope.$apply();//<= Does not help. Changing to $scope.$digest() indicates already in digest loop
});
}]);
As a recap, $rootScope.$on() inside my config fires properly and assigns values to variables on $rootScope correctly. $rootScope.$broadcast generates a secondary message successfully. The controller's $scope.$on registration of the message does not catch. The controller's $rootScope.$on registration fires and assigns values on $scope, but the view does not rebind. Calling $scope.$apply() does not help, and calling $scope.$digest() simply reports that a digest loop is currently running.
Scoped variables are assigned to but the view never rebinds.
What could possibly be causing this issue?