Как выполнять сначала Controller нежели директивный орган Angularjs?

Они могли бы помогать мне в давании примера или документации как renderizar сначала весь controller прежде чем будет работать директивный орган customizada.

То, что у меня есть в controller, так это стоимость: $scope.total = 200;

В HTML у меня есть следующее

<div val-Custom><ul><li data-value="{{total}}"></li></ul></div>

Сейчас я хочу поймать эту стоимость в моем директивном органе ejem:

ctrlsaldosyconsumos.directive('valCustom', function() {
return function(scope, element, attrs) {
    //aqui hago otras cosas me interesa mas 
    attrs.$observe('valCustom', function() {
         element.find('li').animate({ width: element.attr("data-value") + '%' }, 350);
    });
}
})

Сейчас этот восходит оцените в директивном органе он вытекает undefined и если я это помещаю, например

<li data-value="200"></li> 

Это да работает правильно. Я думаю, что сначала работает директивный орган, не загрузив стоимости драйвера раньше ($scope.total).

Какая-то подсказка или помощь я им буду благодарен, я инициализируюсь под этим AngularJS (Угловой 1) и больше под директивными органами. Спасибо.

5
задан 02.09.2019, 15:48
2 ответа

Короткий ответ:

Всегда работает сначала controller нежели директивный орган

Длинный ответ:

Прежде всего помни, что ng-controller это директивный орган также. Порядок выполнения директивных органов - следующий

compile padre
compile hijo
controller padre  =>  ng-controller
pre-link padre
controller hijo   =>  tu directiva
pre-link hijo
post-link hijo
post-link padre

Ты можешь подтверждать это в следующем snippet

angular.module('app', [])
  .directive('padre', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile padre');
        return {
          pre: function() {
            console.log('Pre padre');
          },
          post: function() {
            console.log('Post padre');
          }
        };
      },
      controller: function() {
        console.log('Controller padre');
      }
    };
  })
  .directive('hijo', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile hijo');
        return {
          pre: function() {
            console.log('Pre hijo');
          },
          post: function() {
            console.log('Post hijo');
          }
        };
      },
      controller: function() {
        console.log('Controller hijo');
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <padre>
    <hijo></hijo>
  </padre>
</div>

То, что значит, что, если твой директивный орган не в DOM внутри твоего controller никогда, будет работать сначала, что был.

Если твой код зависит от вызовов Аякс, он не имеет значения в порядке, что ты это выполнил, вероятно, что твой директивный орган прибывает в фазу post-link и еще не прибыли результаты путь ajax.

Решение могло бы состоять в том, чтобы использовать ng-if чтобы сигнализировать, когда могут renderizar директивный орган.

angular.module('app', [])
  .controller('UtilCtrl', function($scope, $timeout) {
    $scope.muestraHijo = false;
    $timeout(function() {
      $scope.muestraHijo = true;
    }, 1000)
  })
  .directive('padre', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile padre');
        return {
          pre: function() {
            console.log('Pre padre');
          },
          post: function() {
            console.log('Post padre');
          }
        };
      },
      controller: function() {
        console.log('Controller padre');
      }
    };
  })
  .directive('hijo', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile hijo');
        return {
          pre: function() {
            console.log('Pre hijo');
          },
          post: function() {
            console.log('Post hijo');
          }
        };
      },
      controller: function() {
        console.log('Controller hijo');
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="UtilCtrl">
  <padre>
    <div ng-if="muestraHijo">
      <hijo></hijo>
    </div>
  </padre>
</div>

Прочитай https://github.com/angular/angular.js/wiki/Understanding-Directives

Если ты нуждаешься в том, чтобы ждать, в который данные $scope они закончили грузить пробуй используя ng-if чтобы отставать обвиняемый блока DOM.

2
ответ дан 03.12.2019, 20:06

Может быть, это смогло ориентировать тебя, я реши это таким образом:

<div val-Custom algo="$scope.algo">
    <ul>
        <li data-value="{{total}}"></li>
    </ul>
</div>

В твоем директивном органе покажи ему следующее:

ctrlsaldosyconsumos.directive('valCustom', function() {
    return {
      restrict: 'A',
      scope: {
        algo: '=algo'
      },
      link: function(scope, elem, attr){
        console.log("llamando al scope.algo deberias tener disponible tus datos")
        attrs.$observe('valCustom', function() {
            element.find('li').animate({ width: element.attr("data-value") + '%' }, 350);
        });
      }
    }
})

Это могло бы помогать тебе понимать функционирование:

Documentario AngularJS (Угловой 1)

Перейди с одного сайта на другой в partado, который говорит: Isolating the Scope of в Directive

Привет, я надеюсь помочь тебе или вести тебя.

0
ответ дан 03.12.2019, 20:06
  • 1
    То, что он перемещает, состоит в том, что я получаю стоимость $scope.total от вызова ajax, из-за которого, когда renderiza DOM, как кажется, это выполняет так быстро, что он не загружает данных controller. не, который я могу делать? – jose.luis.lopez 05.10.2016, 03:07