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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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