Сборка dom с угловой директивой

#angularjs

Вопрос:

Когда я открываю свою страницу, сообщения выводятся из in в out, как событие пузыря. Сообщение 2, сообщение 1. Но мне нужно выводить сообщение 1, сообщение 2, как событие туннеля. Почему так получилось?

 <div by-global-size="width:100%;height:5%;">
<div by-parent-size="width:50%;height:30%;">
</div>
</div>

.directive("byGlobalSize", function () {
    return {
        link: function (scope, element, attributes) {
            alert("Message 1");
        },
        restrict: "A",
        scope: true
    }
})
.directive("byParentSize", function () {
    return {
        link: function (scope, element, attributes) {
           alert("Message 2");
        },
        restrict: "A",
        scope:true
    }
});

У меня не будет двух директив, это всего лишь пример.

 <div by-global-size="width:100%;height:5%;">
<div by-parent-size="width:50%;height:30%;">
<div by-parentChild-size="width:100%;height:5%;">
<div by-parentChildLittle-size="width:50%;height:30%;">
</div>
</div>
</div>
</div>

Еще один пример HTML. От родителя к потомку мне нужно построить дерево dom.

Ответ №1:

Проверьте следующий пример в plunker. Функция компиляции выполняет две функции: предварительную компиляцию и посткомпиляцию.

 directive('myDirective', function myDirective($log){
  var directive = { 
    retstrict : 'A',
    compile : function compile(){
      return {
          pre : function(scope, iElem, iAttr){
                //Your code goes here
          },
          post : function(scope, iElem, iAttr){
                // in essence the link function
          }
       }
     }

  };
  return directive;
}

https://plnkr.co/edit/zEk0icn4KaQFtX0WHonj?p=preview

Функция link по сути является функцией post compile . Что вам нужно, так это метод предварительной компиляции, который работает от внешнего к внутреннему.

1. Результат сборки, внутренний -> внешний, но мне нужен внешний -> внутренний. Как inner узнает о родительском размере, если он не инициализируется первым ?…

2. Извините, я думаю, что это работа до … да. я ночью попробую в проекте, если это сработает, я сказал вам, спасибо. Я отвечаю очень быстро.

Ответ №2:

Если существует какая-то иерархия, вы должны использовать require ключевое слово в своей директиве :

 .directive("byParentSize", function () {
    return {
        link: function (scope, element, attributes) {
           alert("Message 2");
        },
        restrict: "A",
        scope:true,
        require:'^byGlobalSize',
    }
});