데이터 바인딩 된 HTML 클래스를 지시문에 연결

Question

기본적으로 지시문에서 "order-asc"및 "order-desc"클래스를 토글하려고합니다. 나는 지금 토글하는 부분을 폐기했다.

describe('OfferList sorters', function() { 
    'use strict'; 
    beforeEach(module('offerListSorters')); 

    describe('sorter directive', function() { 
    var element, scope, parentScope; 
    beforeEach(inject(function ($compile, $rootScope){ 
     parentScope = $rootScope.$new(); 
     element = angular.element('<sorter order-by="location">{{2+2}}</sorter>'); 
     $compile(element)(parentScope); 
     scope = element.isolateScope(); 
     parentScope.$digest(); 
    })); 

    it('should contain 4', function() { 
     expect(element.html()).toBe('4'); 
    }); 

    it('should have asc/desc state on scope', function(){ 
     expect(scope.isAscending).toBeDefined(); 
    }); 

    it('should have class order-asc by default', function() { 
     expect(element).toHaveClass('order-asc'); 
    }); 
    }); 
}); 

I 다음 지시문이 있습니다 :

나는 다음과 같은 검사를

offerListSorters.directive('sorter', [function(){ 
    return { 
    scope: {}, 
    controller: function($scope, $element, $attrs, $transclude) { 
     $scope.isAscending = true; 
    }, 
    link: function($scope, iElm, iAttrs, controller) { 
     iElm.addClass('order-{{isAscending ? \'asc\' : \'desc\'}}'); 
    } 
    }; 
}]); 

내가 마지막 테스트가 실패 것을 찾을 수 있습니다. {{}} 바인딩은 그대로 클래스 속성에 추가됩니다. 내가 링크 기능의 끝에 $scope.$digest();를 추가 해봤

iElm.attr('ng-class', 'isAscending ? \'asc\' : \'desc\''); 
iAttrs.$set('ngClass', 'isAscending ? \'asc\' : \'desc\''); 

: 나는 또한 지침에 다음 줄이없는 결과로 기능을 연결 시도했습니다. 하지만 아무데도 못 가봤 어.

here 또는 $ function. $ watch magic을 링크 기능으로 수행하여 해결할 수는 있지만 현재 시도하고있는 것이 왜 작동하지 않는지 이해하고 싶습니다.

Answer 1

왜 ng-class를 사용하지 않으시겠습니까?

<div sorter ng-class="{'asc' : isAscending, 'desc' : !isAscending}"></sorter> 

추가하기 addClass 등 $ 보간과 $는 DOM/템플릿에 바인딩/지침을 감지하는 구문 분석 사용합니다 때 각 바인딩 논리가 pahse를 컴파일 $ 동안 추가되기 때문에 작동하지 않을 내부 바인딩. 이후에 추가하면 각도가 일반 문자열로 처리됩니다.