TL; TR; ниже
Я имею дело с огромным приложением, в котором все сделано универсальным, чтобы его можно было легко расходовать. Одна из составляющих - диалог. Прежде чем вы ответите, используйте шаблоны ngInclude или angular, позвольте мне объяснить, как они работают и почему мы хотели бы их придерживаться.
Последовательность создания этого диалога:
- Откуда-то в javascript вызывается функция javascript.
- Это создает контейнер для диалога. Положение, ширина, высота, серый фон и т. Д.
- Как только он появится, появится индикатор загрузки, в то время как запрос GET будет выполнен в серверной части.
- Во внутреннем действии предоставляется имя представления и модель.
Это представление (файл .cshtml) загружается в построитель строк. Чтобы дать вам представление о том, что происходит, вот фрагмент кода, в который загружается представление.
var sb = new StringBuilder(1); using (StringWriter sw = new StringWriter(sb)) { ..... var helper = new HtmlHelper(viewContext, viewDataContainer); using (helper.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" })) { helper.RenderPartial(viewName, model); } return sb.ToString(); }Затем возвращается строка, в javascript она в конечном итоге устанавливается как html:
diag.html(jsonResponse.data);
Теперь представление, которое я загружаю, содержит элементы angular, такие как ng-controller и скобки, чтобы показать что-то из этого контроллера. Вот .cshtml:
@model int
<div ng-controller="dialogGridColumnSelectionController as dgc" ng-init="dgc.init(@Model)">
<table>
<thead>
...
<tbody>
<tr ng-repeat="col in dgc.tableColumns">
<td>
<input type="checkbox" name="some" ng-value="dgc.hide"/>
</td>
<td>{{col.headerName}}</td>
<td>{{col.Description}}</td>
</tr>
</tbody>
</table>
</div>
Несколько утверждений:
ng-appбыл испробован позже, он не нужен здесь, потому что элемент<body>уже имеет его.- Диалог находится внутри элемента
<body>. - Никаких ошибок, никаких угловых предупреждений.
{{col.headerName}}показывает именно то, как показано, поэтому angular не работает.- Контроллер и все остальные необходимые файлы javascript уже загружены на страницу, с которой открывается это диалоговое окно. Тоже пробовал сюда добавить, без разницы. Я также попытался снова загрузить туда angular, это дает мне предупреждение, что я
tried to load it more than once. Итак, скрипты есть.
Теперь я как бы сомневался, что это сработает с самого начала, но я просто хочу убедиться, прежде чем мы начнем серьезную переработку диалогов.
Итак, мой вопрос: возможно ли это? Может ли представление, инициированное из .html() (в javascript) иметь angular? Как мне "запустить" Angular? Или почему он не работает с сгенерированным html?
TL; TR и EDIT:
Покопавшись, я в конце концов сделал следующее:
dialog.html(jsonResponse.data);//dialog is a created jquery element, jsonResponse.data contains the `.cshtml` content
if (options.angularCompile && options.angularScope) {//I've set them in options
options.angularCompile(dialog)(options.angularScope);//= $compile(dialog)($scope) or $compile(dialog.contents())($scope)
}
Из приведенного выше html он действительно запускает функцию init. Эта функция правильно загружает данные (с других внедренных фабрик).
var self = this;
this.tablePageID = 0;
this.tableColumns = [];
$scope.hello = "hii";
this.init = function (tablePageID) {
self.tablePageID = tablePageID;
self.tableColumns = gridTableFactory.getTableColumns(tablePageID);
}
Но после завершения и отображения диалогового окна у него все еще нет угловой работы.
Стоит отметить, что ng-repeat выполнил свою работу с самого начала, никаких элементов нет. Похоже, компилируется и забывает.
1 ответ
Попробуйте выполнить $scope.$apply(); после использования $compile. Возможно, вам потребуется сообщить angular, чтобы обновить его привязки. Также старайтесь избегать прямого использования jQuery и используйте вместо него angular.element("#....").
$apply() внутри контроллера angular, дайджест уже был занят, так что я предположил, что это не нужно. Хотя для этого не требовалось angular.element().
openначинается сvar diag = $(this);.response.dataприменяется к существующему диалогу.html(), а затем я$compileего.