Angularjs ng-класс $ ссылка

У меня есть директива «D1», которая должна создать вложенную директиву «D2», которая должна использовать ширину элемента «D1» для создания содержимого SVG.

Директива «D1» использует класс ng для динамического определения размеров.

directive.template = "<div ng-class="col"></div>"

Переменная col определяется в области контроллера директивы как

$scope.col = "col-md-3" //Boostrap grid system

Функция ссылки на директиву "D1" содержит код для создания вложенной директивы.

var x = angular.element('<D2></D2>');
element.append(x);
$compile(x)(scope);

Трудности начинаются отсюда.

Вторая директива «D2» должна использовать внутреннюю ширину элемента «D1» для создания содержимого с соответствующим размером, но регистрация element.width() из функции связывания «D2» возвращает неправильные размеры, игнорируя стиль css, ранее примененный к «D1», используя ng- класс.

Я предполагаю, что функция связывания «D2» запускается до того, как ng-класс «D1» фактически применил класс

Есть ли у кого-нибудь предложение о том, как следует подходить к этому вопросу?

Демонстрация: http://jsfiddle.net/92ptvf9h/20


angularjs ng-class
person Gavello    schedule 10.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы правы, ng-class на D1 отложит применение класса до следующего $digest цикла.

Я не мог придумать лучшего решения, чем также отложить компиляцию второй директивы.

Если вас это устраивает, вы можете отложить компиляцию с помощью службы $timeout следующим образом:

post: function postLink(scope, iElement, iAttrs, controller) {
  console.log("First postLink width: " + iElement[0].clientWidth);

  $timeout(function () {
    var x = angular.element('<second></second>');
    iElement.append(x);
    $compile(x)(scope);
  }, 0);
}

JSFiddle: http://jsfiddle.net/7ba02otv/1/

Надеюсь это поможет.

person runTarm    schedule 10.08.2014