CODEWITHSUNDEEP
htmlangularjs
sarsparillo
sarsparillo

Reputation: 53

AngularJS - Dynamically change class and load JSON - two things, really

I'm facing an issue (or probably two) that is frustrating the swearwords out of me; keep in mind, I'm a fairly beginner coder, so there's a good chance I'm missing something obvious.

One: I've got a page that has a sidebar that is hidden via a class containing margin-left: -90%. When the class is removed, the bar slides in to fill the whole screen. I can handle this really easily with jQuery, but I'd rather stick as much as possible in Angular - to this end, I've given it the following code:

<div id="detail_box" ng-class="{d_hide: dVis}">
    <a href="" class="box_close" ng-click="hide()"></a>
    <div tw-detail></div> 
</div>

Which, as you can see, has a class that refers to a variable in a controller, and a link that has an ng-click connected to a function. The controller in question is stupidly simple, and relies on $rootScope variables. I'm only using rootScope because in total, over my whole page, I have two variables that will need to change dynamically, but be the same, for every controller and directive I've made. The connecting scope and controller are here:

app.run(function($rootScope) {
    $rootScope.currentUrl = 'visual/design/1/';
    $rootScope.detail_hide = true;
});

app.controller('navController', ['$scope', '$rootScope', 
    function ($scope, $rootScope) {

    $scope.dVis = $rootScope.detail_hide;

    $scope.hide = function(){ 
        $rootScope.detail_hide = false;
    }
}]);

Now, I've used console.log from my ng-click to see that it is picking up clicks, and I've used console.log to make sure that the detail_hide part of rootScope is changing. If I change true to false by hand in my app.js, the detail page hides itself just fine... but that ng-click doesn't actually do what I'm trying when I test it on the page. It's painful and I can't understand why changing the variable via a function (which I know changes the actual variable in rootScope, thanks to extensive testing) isn't telling my detail box to just go away.

Secondly, and it's connected to the first; dynamically changing the currentUrl in rootScope similarly doesn't change the actual AJAX content I've got stuck inside my twDetail directive, even though, again, the ng-click functions I've written do change the variable. Changing it manually works fine (although images in the second URL aren't loading but that's probably an entirely different problem) but just... what the heck am I doing wrong here?

Upvotes: 0

Views: 359

Answers (1)

Rovak
Rovak

Reputation: 778

The following code is only being run once, when the controller is being setup

$scope.dVis = $rootScope.detail_hide

Make sure you change the $scope.dVis in the hide function, like this

$scope.hide = function(){ 
    $rootScope.detail_hide = false;
    $scope.dVis = $rootScope.detail_hide;
}

I need more info on the twDetail directive to be able to solve that problem

Upvotes: 1

Related Questions