2015-05-25 2 views
2

Вот моя директива, которая имеет replace: true набор по определению директивыобъединить ngClass атрибуты, когда заменить истинный

<my-custom-tag> 
</my-custom-tag> 

Это шаблон ДИРЕКТИВА

<div data-ng-class="{'class1': condition1, 'class2': condition2}"> 
</div> 

Теперь, если использование моя директива следующим образом она подбрасывает ошибка

<my-custom-tag data-ng-class="{'class3': condition3}"></my-custom-tag> 

Причина в том, что шаблон a РБП определяет атрибут data-ng-class, излучаемый HTML выглядит следующим образом

<div data-ng-class="{'class3': condition3} {'class1': condition1, 'class2': condition2}"></div> 

Отсюда возникает ошибка синтаксиса при компиляции шаблона. Любой способ объединить эти объекты?

Plunkr, смотреть на консоли браузера для сообщения об ошибке и проверить элемент атрибута проверьте data-ng-class

+0

Можете ли вы предоставить jsfiddle? – cespon

+0

Обновлен вопрос –

ответ

2

Я видел, что есть open issue говорить об этом.

Вы можете использовать compile, чтобы изменить выражение перед запуском функции связи. Plunkr.

angular.module('directive', []).directive('myCustomTag', function() { 
    return { 
    template: "<div data-ng-class=\"{'foo': whenFoo()}\">My Custom Tag</div>", 
    restrict: 'E', 
    replace: true, 
    compile: function compile(tElement, tAttrs) { 

     tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', '); 

     return function (scope, iElement, iAttrs) { 
     scope.whenFoo = function() { 
      return true; 
     }; 

     }; 
    } 
    }; 
}); 
Смежные вопросы