23

我有一个指令，其中一些内容通过ng-html-bind-unsafe. 我喜欢在内容发生变化时进行过渡。我可以使用 jquery 将其淡出，更改内容值并将其淡入。

AngularJS 有更优雅的方式吗？

4

3 回答 3

24

我认为有一种更好的方法，除了包含 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 会自动添加和删除“value-2-add”、“value-10-add”等类...

于 2014-09-17T15:29:56.070 回答
5

在 Angular 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
   });
  };
 } //return
});

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

于 2013-09-24T20:14:00.143 回答
5

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

这是我学到的（我在下面附上了小提琴）

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

其次，您不能将 angular 视为 jquery，您可以在其中找到一个元素并对其进行更改。Angular 的关键是可重用性，而我最初的尝试严重缺乏这一点。

第三，诸如 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 期间，我调用了一个高亮函数并传递了一个名为“name”的参数。这个论点是可重用性的关键。

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

一旦通过，toggle 就等于参数。

这里是踢球者...

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

当toggle==传递的参数时，当它==到'name'+false时应用高亮，'noToggle'类应用平滑的非高亮动画。

等等... ng-blur 呢？我很高兴你问！ng-blur 调用“doneHighlight”函数并传递相同的类参数。

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

但是，在传递参数时，它还会在类名的末尾附加一个 false 值。这是一种与 jQuery 不同的思维方式，但允许我将控制器中的函数重用于尽可能多的元素；

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

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

于 2014-03-14T17:59:39.297 回答