Оценка выражений усов после инициализации страницы (динамическая привязка)

У меня есть HTML-документ, содержащий выражения усов, которые angular-dart очень хорошо оценивает:

</head>
<body ng-cloak>
  <ctrlTextElements>
    <div id="stage">outside: {{ctrlTextElements.test1('three')}}</div> 
  </ctrlTextElements>

Я хочу динамически добавить HTML с выражением усов, например:

CtrlTextElements.addTextElement(mousePos.x, mousePos.y);
var div = dom.querySelector('#stage');
  HttpRequest.getString("../path/text.html").then((r) {
      div.children.add(new Element.html(r, validator: new AllowAllValidator()));
  });

Содержимое добавленного text.html выглядит так:

<div>inside: (not evaluated): {{ctrlTextElements.test1('three')}}</div>

Вот результат в браузере:

снаружи: три
внутри: (не оценено):{{ctrlTextElements.test1('три')}}

Как я могу переоценить выражения усов внутри содержимого, которое было применено после загрузки страницы?


dart angularjs angular-dart curly-braces
person Ironori    schedule 13.05.2014    source источник
comment
Возможно, мне придется добавить, что я не знаю, сколько манипуляций с DOM будет после завершения загрузки страницы.   -  person Ironori    schedule 14.05.2014
comment
Дополнительные контексты: я создаю приложение, в котором пользователь может генерировать содержимое страницы. Пользователь выбирает из разных модулей и создает столько модулей, сколько хочет иметь на странице. После выбора модуль отображается на сайте (копия HTML-кода будет добавлена ​​в DOM). Пользователь может изменить настройки модуля. И вот хочу установить привязку. Для каждого модуля, который создает пользователь, я хочу иметь объект дротика, который принимает значения, которые устанавливает пользователь. Кроме того, я хочу иметь возможность изменять эти значения с помощью контроллера и видеть результат в окне браузера.   -  person Ironori    schedule 14.05.2014

Ответы (2)


arrow_upward
1
arrow_downward

Проблема в том, что здесь вы смешиваете jQuery-подобную логику с угловой логикой: манипулирование dom «вручную» редко бывает хорошим решением.

Проблема здесь в том, что ваша недавно добавленная привязка не была скомпилирована angularjs = она не была проиндексирована как директива, за которой следует следить и обновлять при изменении области.

Либо вы пытаетесь использовать более угловой способ, например, используя директиву ng-hide или ng-repeat для отображения вашего контента в соответствии с контроллерами $scope (или другой пользовательской директивой), либо вы пытаетесь $ скомпилировать свою недавно добавленную директиву (но это плохо): https://docs.angularjs.org/api/ng/service/$компилировать.

Возможно, попробуйте в своем контроллере: $scope.$compile(div);

Хотя не уверен в синтаксисе. Может быть, вам нужно написать

<span ng-bind="..."></span>

вместо

{{ ... }}

чтобы заставить его работать.

person AlexHv    schedule 13.05.2014
comment
Хорошо, я новичок в Angular и Dart и не являюсь экспертом в манипулировании DOM. Я вижу, что angular нужно знать, что было изменено в DOM. Я понимаю, что привязка не установлена. Я думаю, что ng-hide не работает так, как я хочу, потому что я не знаю, сколько раз DOM будет изменен после загрузки страницы (я добавляю больше контекстов к моему вопросу выше). По той же причине я думаю, что ng-repeat не годится. - person Ironori; 14.05.2014
comment
Подход к компиляции недавно добавленной директивы звучит многообещающе. Здесь может быть та же проблема, что мне нужно заранее знать, сколько раз я хочу вставить HTML. Я не знаю этого. Я собираюсь прочитать, что возможно с помощью $compile. - person Ironori; 14.05.2014
comment
Вы можете компилировать новые элементы каждый раз, когда они добавляются в DOM. Может быть, вы могли бы загрузить данные элементов в $scope и использовать такие директивы, как ng-repeat, чтобы поддерживать представление в актуальном состоянии? Вот как это работает лучше всего. Создание пользовательских директив также является мощным инструментом. - person AlexHv; 14.05.2014
comment
Похоже, $compile действительно является способом решить мою проблему. Мне нравятся примеры внизу docs.angularjs.org/api/ng/service /$compile к сожалению, они написаны на JS, а не на Dart, и я не уверен, что этот сервис реализован в dart. Пока я нашел только это: docs.angulardart.org/#angular-core.Compiler. Теперь я понимаю, что вы имеете в виду, используя ng-repeat, спасибо. Я даю ng-повторить попытку. - person Ironori; 14.05.2014
comment
@Günter Zöchbauer показывает, что этот способ компиляции работает (я помню, что использовал _compiler в валидаторе). У меня должно быть достаточно информации, чтобы решить проблему :) - person Ironori; 14.05.2014

arrow_upward
0
arrow_downward

@Alexhv прав. Извините за мой предыдущий ответ. Я предположил, что речь идет о Полимере. Было уже пора спать.

Вы можете найти пример кода в моем ответе на этот вопрос: setInnerHtml не оценивает усы

Пакет паба bwu_angular (http://pub.dartlang.org/packages/bwu_angular) содержит этот код в качестве декоратора (директивы) с именем bwu-safe-html

person Günter Zöchbauer    schedule 13.05.2014
comment
Я не видел первый ответ :) Спасибо, я попробую этот код позже (нашел его раньше, нужно проверить, почему я подумал, что это не то, что я искал). - person Ironori; 14.05.2014