Jquery 以角度方式设置SVG动画

我是新手。我的大部分Javascript经验包括使用jQuery浏览DOM树。从花大约十个小时的时间胡思乱想和阅读文章。我明白了，你真的不应该以同样的方式接近我。我有一个模板

<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>

当用户单击

.goalCard content

时，一个名为“is checked”的类将应用于

。在我的CSS中，我应用了一些代码，这些代码被假定为将“加号”更改为“复选标记”。目前，这只适用于Chrome和Safari，因为SVG的x和y坐标被假定为HTML属性，而不是CSS属性。Chrome和Safari解决了这个问题，但Firefox没有。因此，我的解决方法是更改Javascript中的特定属性

下面是我目前在plusButton控制器中的代码。它成功地将“加号”动画化为“复选标记”，但到目前为止，任何使其返回“加号”的尝试都没有成功。我正在使用Coffeescript和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

---

我试图包括所有相关信息，但如果需要澄清，请询问

只需使用

ng click

定义单击按钮时要执行的操作。并使用

ng class

在满足特定条件时设置一个类

再看看这个例子，它使用了我刚才告诉你的内容：

在ng click调用的函数中，您可以管理一个布尔变量，以了解svg处于何种状态

例如：

var isChecked = false;

$scope.changeState = function(){
  if(isChecked){
    // checkmark changes to a plus 
    isChecked = false;
  } else {
    // plus changes to a checkmark
    isChecked = true;
  }
}

---

嘿，谢谢你的评论，但是你能更具体一点吗？我已经在使用ng click编写一个函数，该函数在单击时被调用。问题是代码只更改了一次，但没有将其更改回来。因为Angular不像jQuery那样运行，所以我知道没有一种简单的方法可以做到这一点。你能构建一个工作的plunker吗？记住jQuery是不需要的，只需要使用angular就可以了。我相信你想要的东西可以用它来涵盖，但我需要先完全理解。啊，我的应用程序中有很多东西。创建一个Plunker将是非常麻烦和困难的。我的ng click正在工作，本质上我只需要知道如何编写代码来矫揉造作地切换按钮，以便plus在单击时更改为选中标记，然后再次单击返回。我第一次成功地改变了它，但是第二次它没有正确地改变回来。我知道这可以在常规Javascript中完成，但在Angular中，这似乎不是正确的方法。看看编辑后的答案，这可能会对您有所帮助，如果您有许多按钮，您可以使用单个Javascript函数为每个按钮定义一个属性。

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

.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;
}

var isChecked = false;

$scope.changeState = function(){
  if(isChecked){
    // checkmark changes to a plus 
    isChecked = false;
  } else {
    // plus changes to a checkmark
    isChecked = true;
  }
}