13429

ngShow on $parent variable?

Question:

I've got something running in the $rootScope to set an application-wide value for userLoggedIn:

mod.run(function($rootScope) { $rootScope.userLoggedIn = false; $rootScope.$on('loggedIn', function(event, args) { $rootScope.userLoggedIn = true; }); });

and when the user is logged in I leverage $emit to raise that event:

mod.controller('FacebookController', function($scope) { $scope.loggedIn = function() { $scope.$emit('loggedIn'); }; });

and this is working.

Next I've configured an attribute directive to bring the $rootScope into view:

mod.directive('rootScope', function() { return { scope: { userLoggedIn: '@' }, restrict: 'A' }; })

However, when I use it on the elements to show/hide based off its value it doesn't work:

<div class="row" root-scope> <div class="panel callout radius" ng-show="!userLoggedIn">

and:

<form name="listForm" root-scope novalidate ng-submit="listForm.$valid && model.save()" ng-show="userLoggedIn">

Why doesn't that value come into scope? When I look at the angular scope in Chrome the variable isn't in scope. It is on the $parent though as expected.

<strong>UPDATE</strong>

So, if I use $root.userLoggedIn it does reference the property as expected, however, the view still doesn't respond when the value is changed. For example, if I reload the page it's false initially, but after Facebook is done logging in it's set to true; the view doesn't respond.

Answer1:

The answer was unbelievably simple, and leveraged a comment too. I did in fact just need the view to use $root.userLoggedIn, but I also needed to leverage the $apply:

mod.run(function($rootScope) { $rootScope.userLoggedIn = false; $rootScope.$on('loggedIn', function(event, args) { $rootScope.$apply(function() { $rootScope.userLoggedIn = true; }); }); });

Answer2:

scope: { userLoggedIn: '@' }

Your directive expects the HTML attribute userLoggedIn, but there is none in your HTML. Also keep in mind that @ always resolves to a String.

The second and more important point is that only your root-scope directive operates in the isolate scope, but not ng-show. In other words: Using root-scope has no effect whatsoever. Based only on the code you presented, your example works as expected.

Recommend

  • What is the dash (“-”) when used with pipe (“|”) in CMD?
  • Handle Authentication and Authorization in jax-rs webservice with cxf
  • How to add a “using” statement to the System.Data.Entity namespace [closed]
  • Compiling Element Causes Input Caret Position to Move to End
  • R h2o.glm - issue with max_active_predictors
  • Cordova Apache wrong module path
  • How do you keep a running instance for Google App Engine
  • ASPNetCore MVC Routing Let Server Handle Specific Route
  • Angular2 - Template reference inside NgSwitch
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Prevent Tomcat from caching request during starup
  • Set focus to first invalid form element in AngularJS
  • Suppressing passwd when calling sqlplus from shell script
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • Tamper-proof configuration files in .NET?
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • JQuery Internet Explorer and ajaxstop
  • Use of this Javascript
  • Android full screen on only one activity?
  • C++ Partial template specialization - design simplification
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • HTML download movie download link
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Sending data from AppleScript to FileMaker records
  • When should I choose bucket sort over other sorting algorithms?
  • How to get next/previous record number?
  • Unanticipated behavior
  • Cannot Parse HTML Data Using Android / JSOUP
  • Python: how to group similar lists together in a list of lists?
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • How to load view controller without button in storyboard?