current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Alright so I found out what might be my solution for a task I am trying to accomplish: to use some sort of toggle feature which I have seen represented a couple of different ways in other questions here on Stack Overflow. However, mine is a bit of a special case that I can't seem to figure out how to adjust to get it to work.

Here is the accordion where the text needs to appear:

<div ng-controller="Ctrl">
  <accordion id="myID">
    <accordion-group heading="My Heading">
      {{toggleText}}
    </accordion-group>
  </accordion>
</div>

The text that needs to appear depends on what is clicked however:

<area ng-repeat="x in Object" alt="{{x.name}}" title="" ng-click="thisClick(x.name,x.address);toggle = !toggle" shape="poly" coords="{{x.htmlcoords}}" />

I have an image that has hot spots on it. I used ng-click="thisClick(x.name,x.address)" to easily capture the data from my Object and I was able to alert it in my thisClick(name,address) function. This part of the HTML is in a div that separately calls the same controller as the one above, I don't know if that would be relevant. I couldn't get my code working before trying this toggle stuff unless I kept the controller where it was and just called it again. Anyway, now to apply the toggle feature I tried changing the ng-click to what is shown above and the function to:

$scope.thisClick = function(name,address){
    $scope.toggle = true;
    $scope.$watch('toggle',function(){
        $scope.toggleText = $scope.toggle ? '' : name+address;
    });
};

Ultimately the name and address won't be squished together but this is for testing purposes only.

When I run the code, simply put nothing happens.

Either there is a way to clean this up or a way to approach this entirely differently? I hope I provided enough information.

I wish it were as simple as:

<area ng-repeat="x in building" alt="{{x.name}}" title="" ng-click="thisBuilding = x.name+x.address" shape="poly" coords="{{x.htmlcoords}}" />

$scope.buildingName = name;
        $scope.buildingAddress = address;
        $scope.thisBuilding = function(){
            return $scope.buildingName + " " + $scope.buildingAddress;
        };
    };

:

{{thisBuilding()}}
share|improve this question
1  
There's a missing comma before toggle thisClick(x.name,x.address),toggle = !toggle change to thisClick(x.name,x.address);toggle = !toggle –  Fals 19 hours ago
    
@Fals thank you I did not know there should be a semi-colon there rather than a comma. That eliminated that crazy error and the code now enters the function (tested with an alert). However, toggling still is not occuring. :( –  Christine268 19 hours ago
    
You must check how to use the toggle variable with the accordion that you are using! Good Look! :) –  Fals 19 hours ago
    
will get more verbose error output using development version (non minified) –  charlietfl 18 hours ago
    
@Fals The Accordion actually has nothing to do with anything. That just happens to be the container it is in. It could be a div, p, span, whatever. Another example I've seen, it was on a button. –  Christine268 18 hours ago

1 Answer 1

up vote 0 down vote

This sounds quite a lot like a scope issue. As ng-repeat creates a new child scope for each item, most likely you end up setting the $scope.toggleText property in "wrong" scope, i.e. not in the scope of accordion-group where you are trying to display the property.

You might want to play around a bit with some Angular inspector tool, for example ng-inspector to verify this.

If the problem indeed is with toggleText property ending up in the wrong child scope, one possible workaround could be introducing a container object for the property in the root scope. The reason why this could work is that objects are passed as references for child scopes, not as copies like primitive properties are. A whole lot more on this topic can be read from Understanding Scopes article in AngularJS wiki.

So, something along these lines, starting from controller Ctrl:

// inside the controller code:
// initialize the toggleContainer object
$scope.toggleContainer = {};

Then in html template:

<div ng-controller="Ctrl">
  <accordion id="myID">
    <accordion-group heading="My Heading">
      {{toggleContainer.text}}
    </accordion-group>
  </accordion>
</div>

And finally in the thisClick function, store the value you want to property toggleContainer.text instead of simple toggleText:

$scope.thisClick = function(name,address){
  $scope.toggle = true;
  $scope.$watch('toggle',function(){
    $scope.toggleContainer.text = $scope.toggle ? '' : name+address;
  });
};
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.