바인딩 값이 변경될 때 AngularJS 트리거 ng-animate

바인딩 값이 변경될 때 AngularJS 트리거 ng-animate

일부 내용이 다음을 통해 구속되는 지침이 있습니다.ng-html-bind-unsafe. 저는 내용이 바뀌면 전환하는 것을 좋아합니다.저는 jquery를 사용하여 그것을 퇴색시키고, 내용 값을 변경하고 다시 퇴색시킬 수 있습니다.

AngularJS로 더 우아한 방법이 있습니까?

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

그리고 voila!ngAnimate가 'value-2-add', 'value-10-add' 등의 클래스를 자동으로 추가 및 제거함에 따라 값이 변경될 때마다 배경색이 노란색과 등으로 바뀝니다.

각 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

데이터 바인딩 중에 텍스트를 강조 표시하려고 할 때 비슷한 문제가 발생했습니다.더 날렵한 UI를 위해 변경되는 텍스트를 강조하는 것이 목표입니다.UI 관점에서는 양식을 작성하는 동안 사용자가 무엇이 변경되는지 알 수 있습니다.

제가 배운 내용은 이렇습니다 (아래 fiddle 첨부했습니다)

첫째, 시계를 사용하고 싶지 않습니다.이렇게 하면 true::false on ng-class의 불쾌한 사이클이 생성되므로 깨끗한 전환이 출력되지 않습니다.

둘째, 각진 것을 원소를 찾아서 바꾸는 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 중에 하이라이트 함수를 호출하고 '이름'이라는 인수를 통과합니다.이 논쟁은 재사용 가능성의 핵심입니다.

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

통과하면 토글이 인수와 같습니다.

여기 키커가...

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

토글이 == to passed 인수인 경우 == to 'name' + false일 때 'noToggle' 클래스가 적용되고 부드러운 강조 표시 해제 애니메이션이 적용됩니다.

잠깐... 응블러는?질문해주셔서 기쁩니다! ng-blur는 'doneHighlight' 함수를 호출하여 같은 클래스의 논쟁을 통과합니다.

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

그러나 인수를 통과할 때 클래스 이름 끝에 잘못된 값을 붙이기도 합니다.이것은 jQuery와는 다른 사고방식이지만 필요한 만큼 컨트롤러의 기능을 재사용할 수 있게 해줍니다.

도움이 됐기를!저는 더 이상의 질문에 대답할 수 있게 되어 기쁩니다.

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

언급URL : https://stackoverflow.com/questions/18991014/angularjs-trigger-ng-animate-when-binding-value-change