Question

我有一个指令，其中一些内容通过ng-html-bind-unsafe绑定。我希望在内容发生变化时进行转换。我可以使用jquery淡化它，更改内容值并将其淡入。

AngularJS有更优雅的方式吗？

Answer 1

我认为除了包括ngAnimate之外，还有一种更好的方法，不涉及新的JS代码。

举个例子：

<span class="my-example value-{{myValue}}">{{myValue}}</span>

通过设置使用该值的类，我可以使用ngAnimate异能进行类更改。

在我的SCSS（或LESS）中，我会写：

span.my-example{
    display: inline-block;
    padding: 0 3px;
    background-color: white;
    transition: background-color 0.26s linear 0s;
    &[class*="-add"] {
        background-color: yellow;
    }
}

瞧！每当值发生变化时，背景颜色都会变为黄色并返回，因为ngAnimate会自动添加和删除类似于＆＃39; value-2-add＆＃39;，＆＃39; value-10-add＆＃39;等。 ..

Answer 2

在角度1.2.0中，您可以使用监视内容更改的指令，然后添加删除类。您可以将动画绑定到那些类添加和删除，从而触发您正在寻找的淡入淡出效果。

module.directive('contentChange', function(){

 return {

  scope: {
   content: '='
  },

  template: '<span ng-bind-html="myContent"></span>',

  link: function(scope, element, attrs){
   scope.$watch('content', function(){

    //add fader class to element

    scope.myContent = content;

    //remove fader class from element
   });
  };
});

这是一篇关于1.2动画的热门文章：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 3

在尝试在数据绑定期间突出显示文本时遇到了类似的问题。我的目标是突出显示正在更改的文本，以获得更时尚的UI。从UI的角度来看，这可以确保用户在填写表单时知道要更改的内容。

以下是我学到的内容（我附上了fiddle）

首先，您不想使用手表。这将在ng-class上创建一个令人不愉快的true :: false循环，因此不会输出干净的过渡。

第二，你不能将角度视为jquery，你找到一个元素并改变它。角度的关键是可重用性，我最初的尝试严重缺乏。

第三，事件，例如ng-focus，ng-blur，ng-click，（......等等），是获得我想要的结果的绝佳选择。

我的解决方案是使用ng-focus和ng-blur来检测输入的编辑时间

<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')" 
ng-model="user.name" />

在ng-focus期间，我正在调用一个高亮显示功能并传递名为＆＃39; name＆＃39;的参数。这个论点是可重用性的关键。

 $scope.highlight = function(className){
    $scope.toggle = className;
}

一旦通过，切换等于参数。

这里是踢球者......

<div  ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}">
    {{user.name}}
</div>

当切换= =到传递的参数时，如果是==，则命名为＆＃39; + false＆＃39; noToggle＆＃39;使用平滑的unhighlight动画应用class。

等等...... ng-blur怎么样？你很高兴我问！ ng-blur调用了一个“完成的高亮度”＆＃39;函数并传递相同的类参数。

$scope.doneHighlight = function(className){
    $scope.toggle = className + false;
}

但是，在传递参数时，它还会在类名末尾附加一个false值。这是一个与jQuery不同的思维模式，但允许我在控制器中重用所需的元素;

希望这有帮助！我很乐意回答任何进一步的问题。

http://jsfiddle.net/bebold/8MAKT/1

AngularJS在绑定值更改时触发动画

3 个答案: