У меня есть директива, где некоторый контент связан через ng-html-bind-unsafe. Мне нравится переход при изменении контента. Я могу использовать jquery, чтобы угаснуть его, изменить значение содержимого и вернуть его обратно.
Есть ли более элегантный способ с AngularJS?
В 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
Я думаю, что лучший способ не включает новый JS-код, отличный от ngAnimate.
Возьмем этот пример:
<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" и т.д.
У меня возникла аналогичная проблема при попытке выделить текст во время связывания данных. Моя цель - выделить текст, который изменяется для более гладкого пользовательского интерфейса. С точки зрения пользовательского интерфейса это гарантирует, что пользователь знает, что меняется при заполнении формы.
Здесь я узнал (я добавил fiddle ниже)
Во-первых, вы не хотите использовать часы. Это создаст неприятный цикл true:: false на ng-классе и, следовательно, не выведет чистый переход.
Во-вторых, вы не можете придумать 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 я вызываю функцию выделения и передаю аргумент под названием "имя". Этот аргумент является ключом к повторному использованию.
$scope.highlight = function(className){
$scope.toggle = className;
}
После прохождения, toggle равно аргументу.
Здесь кикер...
<div ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}">
{{user.name}}
</div>
Когда toggle is == переданному аргументу, тогда выделение применяется, когда оно равно == name '+ false, класс' noToggle 'применяется с гладкой анимацией без эмоций.
Подождите... как насчет ng-blur? Я рад, что вы спросили! ng-blur вызывает функцию doneHighlight и передает один и тот же аргумент класса.
$scope.doneHighlight = function(className){
$scope.toggle = className + false;
}
Однако при передаче аргумента он также присваивает ложное значение в конце имени класса. Это другое мышление, а затем jQuery, но позволяет мне повторно использовать функции в контроллере для любого количества элементов по мере необходимости;
Надеюсь, это помогло! Я рад ответить на любые другие вопросы.