0

I'm new to Angular. Most of my Javascript experience includes navigating the DOM tree with jQuery. From spending about ten hours messing with Angular and reading this article. I learned that you really shouldn't approach Angular the same way. I have a template ... 

<div
    class="goalCard-content"
    data-ng-click="goalCard.toggleGoal()">
    <card-circle
        class="u-fillRemaining"
        krg-circle-title="goalCard.goal.name"
        krg-circle-icon="goalCard.goal.icon">
    </card-circle>

    <div class="u-maxX u-pullRight">
        <plus-button
            data-krg-button-checked="goalCard.isAdded()">
        </plus-button>
    </div>
</div>

And within this template if you look at the <plus-button>there is another template with the following code ...

<button
    class="button button--plusButton"
    data-ng-click="plus.toggleState($event)"
    data-ng-class="{'is-checked':plus.state}">
    <svg viewBox="-7 9 24 24" xml:space="preserve">
        <rect
          x="4" y="16.5" width="2px" height="9px"
          class="plusButton-topBar" />
        <rect
          x="0.5" y="20" width="9px" height="2px"
          class="plusButton-bottomBar" />
    </svg>
</button>

What I am trying to accomplish is when the user clicks ".goalCard-content" the html attributes of the ".plusButton-topBar" and ".plusButton-bottomBar" change from one state to another. In jQuery this would be accomplished with something like ... 

$('.goalCard-content).click(function() {
   topBar = $(this).find(".plusButton-topBar")
   topBar.velocity{(
      width: 10px,
      ... more code
   )}
)}

When the user clicks .goalCard-content a class called, "is-checked" is applied to the <button>. In my CSS I apply code that is suppose to change the "plus" to a "checkmark." Currently, this only works on Chrome and Safari because the SVG has x and y coordinates that are suppose to be HTML attributes as opposed to css properties. Chrome and Safari figure this out, but Firefox does not. So my workaround is to change the specific attributes in Javascript.

Below is the code I currently have inside of my plusButton controller. It succeeds in animating the "plus" into a "checkmark" but so far any attempt to make it go back to a "plus" have not worked. I'm using Coffeescript and velocity.js.

angular.module('shop').directive 'plusButton', ->
templateUrl: 'shop/common/plus-button.html'
scope: {
    state: '=krgButtonChecked'
}
bindToController: true
controllerAs: 'plus'
controller: ($document, $element) ->

    @toggleState = (event) ->
        console.log event.currentTarget

    $document.find('.goalCard-content').click ->
        topBar = $(this).find(".plusButton-topBar")
        bottomBar = $(this).find(".plusButton-bottomBar")

        $(topBar).velocity width: 2, height: 10.9, x: 5.7, y: 15 , "ease"
        $(bottomBar).velocity width: 6.2, height: 2, x: -1.3, y: 21.8,  "ease"
        console.log 'hit'

    return

CSS

.plusButton {
    display: block;
    height: 1.5rem;
    width: 1.5rem;
}

.button--plusButton {
    height: 1.5rem;
    width: 1.5rem;
    min-width: 0;
    padding: 0;
    border-radius: 100%;
    border: 1px solid $gray-5;
    background-color: $white;
    transition: all $transition-timing ease;

svg {
    height: 100%;
    width: 100%;
}

&.is-checked {
    background-color: $gray-10;
    border-color: $gray-10;

    .plusButton-topBar,
    .plusButton-bottomBar {
        fill: $white;
    }

    .plusButton-topBar {
        x: 5.7px;
        y: 15px;
        // width: 2px;
        // height: 10.9px;
        transform: matrix(0.7167, 0.6974, -0.6974, 0.7167, 16.5362, 1.2912);
    }

    .plusButton-bottomBar {
        x: -1.3px;
        y: 21.8px;
        // width: 6.2px;
        // height: 2px;
        transform: matrix(0.7678, 0.6407, -0.6407, 0.7678, 15.0324, 4.1146);
    }

    animation: plusButton-pulse $transition-timing ease-in-out;
  }
}

.plusButton-topBar,
.plusButton-bottomBar {
    fill: $gray-8;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transition: all $transition-timing ease;
}

.plusButton-topBar {
    x: 4px;
    y: 16.5px;
}

.plusButton-bottomBar {
    x: 0.5px;
    y: 20px;
}

I tried to include all the relevant information, but if clarification is needed please ask.

Community
  • 1
  • 1
London804
  • 1,072
  • 1
  • 22
  • 47

1 Answers1

0

Just use ng-click to define the action you want to execute when your button is clicked. And use ng-class to set a class when a certain condition is met.

https://docs.angularjs.org/api/ng/directive/ngClick

https://docs.angularjs.org/api/ng/directive/ngClass

https://docs.angularjs.org/guide/animations

Also take a look at this example that uses what I have just told you: http://plnkr.co/edit/?p=preview

In the function called by the ng-click you could manage a boolean variable for knowing in which state is the svg.

For example:

var isChecked = false;

$scope.changeState = function(){
  if(isChecked){
    // checkmark changes to a plus 
    isChecked = false;
  } else {
    // plus changes to a checkmark
    isChecked = true;
  }
}
Ignacio Villaverde
  • 1,264
  • 1
  • 11
  • 15
  • Hey, thanks for commenting, but can you be more specific? I'm already using the ng-click to write a function that is being called on click the problem is the code changes it one time but doesn't change it back. Since Angular doesn't operate like jQuery there isn't an easy way to do this that I know of. – London804 Dec 10 '15 at 18:13
  • Could you build a working plunker? Remember that jQuery is not needed, just use angular for being much clean and tidy. – Ignacio Villaverde Dec 10 '15 at 18:15
  • I believe that what you want can be covered with this, but I need to understand perfectly first. – Ignacio Villaverde Dec 10 '15 at 18:46
  • Ah, there are a lot of pieces in my application. Creating a Plunker would be very cumbersome difficult. My ng-click is working, essentially I just need to know how to write the code to affectedly toggle the button so that the plus changes to a checkmark on click and then back again on click. I successfully made it change the first time, but the second time it doesn't change back correctly. I know this can be done in regular Javascript but it seems in Angular that is not the right approach. – London804 Dec 10 '15 at 19:59
  • Take a look at the edited answer, that could help you, if you have a lot of buttons you could define a property for each one with a single javascript function. – Ignacio Villaverde Dec 10 '15 at 20:20