0

Имеется небольшое приложение на ангуляре (директива), которое прекрасно работает на одиночной странице. Но вот если эту страницу загрузить аяксом в DIV, ангуляр даже не запускается.

Чтобы упростить сделал на фидле два примерчика: Вот так не работает: http://jsfiddle.net/ivahaev/mnv2mqfp/1/

А вот так вполне работает: http://jsfiddle.net/ivahaev/mnv2mqfp/2/

Пробовал загружать ангуляр и контоллеры в разном порядке - все без толку. То, что в родительском HTML - исполняется. Что в дочернем - нифига.

И да, я понимаю, что это в концепцию ангуляра не складывается. Но я постепенно перевожу свое приложение. Не могу все сразу сделать.

Ах да, вопрос! Как запустить-то? :)

P.S. Решение найдено! http://jsfiddle.net/ivahaev/mnv2mqfp/3/ Мануал тут: https://docs.angularjs.org/guide/bootstrap Manual Initialization

4
  • а чего бы вам эту страницу как темплейт не загружать ?
    – zb'
    7 авг 2014 в 19:15
  • А потому что эта страница - часть большого приложения и генерируется на сервере
    – ivahaev
    12 авг 2014 в 6:56
  • ну и запрашивать темплейт с сервера.
    – zb'
    12 авг 2014 в 6:57
  • Перепишите вопрос по формату сервиса. 8 мая 2015 в 17:10

1 ответ 1

2

Это делается через $compile:

angular.module('myapp', [])
  .directive('replace', replace);


replace.$inject = ['$compile'];

function replace($compile) {
  return {
    restrict: 'A',
    link: function($scope, $elem) {
      var html = "<input type='text' ng-model='username'>{{username}}";
      $elem.append($compile(html)($scope));
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp">
  Parent content here
  <br>
  <hr>Subsidiary content:
  <div replace></div>
</div>

Если используется форма с ngModelController и необходимо привязать scope динамически добавленного элемента формы, к примеру, input (чтобы задействовать нативный валидатор):

angular.module('myapp', [])
  .directive('replace', replace)
  .directive('username', username);


replace.$inject = ['$compile'];

function replace($compile) {
  return {
    restrict: 'A',
    link: function($scope, $elem) {
      var html = "<input type='text' name='username' ng-model='username' username required>{{username}}";
      $elem.append($compile(html)($scope));
    }
  }
}

function username() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function($scope, $elem, $attrs, $ctrl) {
      $scope.form.$addControl($ctrl);
    }
  }
}
input {
  display: block;
}
input.ng-invalid.ng-touched {
  background-color: #FA787E;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="myapp">
  Parent content here
  <br>
  <hr>Subsidiary content:

  <form name="form" novalidate>
    <div replace><!--добавляемый элемент формы--></div>
    <span ng-show="form.username.$touched && form.username.$error.required">Username is empty.</span> 

    <input type='password' name='pass' ng-model='pass' required>{{pass}}
    <span ng-show="form.pass.$touched && form.pass.$error.required">Password is empty.</span> 
  </form>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.