Моя идея состоит в том, чтобы создавать шаблоны (для вопросов), которые можно выбрать в элементе в стороне.
Для создания отложенного элемента в angularjs я пробовал с dbtek/angular-aside. Это работает очень хорошо, но моя проблема в том, что я должен хранить шаблон в дополнительном файле шаблона, и мне нужно изменить существующую переменную $ scope (чтобы установить шаблон в форме).
Пример:
create_question.html (кнопка, чтобы открыть элемент и шаблон шаблона отображения)
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
<span class="glyphicon glyphicon-align-justify"></span> Right
</button>
Choosen template is {{choosenTemplate}}
create_question.js (var для выбранного шаблона, функция для открытия элемента и функции для изменения шаблона var)
$scope.choosenTemplate = 0; // 0 = default
$scope.openAside = function(position) {
$aside.open({
templateUrl: 'aside.html'
placement: position,
backdrop: true,
controller: function($scope, $modalInstance) {
$scope.ok = function(e) {
$modalInstance.close();
e.stopPropagation();
};
$scope.cancel = function(e) {
$modalInstance.dismiss();
e.stopPropagation();
};
}
})
};
$scope.setTemplate = function(templateNumber)
{
$scope.choosenTemplate = templateNumber;
}
aside.html (шаблон для элемента в стороне - контент неактуальен)
<div>
<button ng-click="setTemplate(2)">Template 2</button>
</div>
Отключенный элемент отображается, но функция никогда не вызывается, когда я нажимаю кнопку.
Когда я перехожу на
aside.html
<div ng-controller="CreateQuestionCtrl">
<button ng-click="setTemplate(2)">Template 2</button>
</div>
функция вызывается, но теперь у меня есть два разных $ scopes (я думаю)? И я могу изменить только неправильный элемент $ scope (внутри в сторону).
Другая попытка состояла в том, чтобы установить шаблон в <script>
-element следующим образом:
<script type="text/ng-template" id="aside.html">
<button ng-click="setTemplate(2)">Template 2</button>
</script>
и установите этот элемент внутри create_question.html, но теперь я не могу снова вызвать эту функцию.
Кто-нибудь есть идея, как я могу иметь тот же $ scope на "двух разных" страницах? Оба находятся на одной странице, но я не могу получить доступ к той же $ -области.
Вероятно, есть более эффективные способы связи между главными и сторонними контроллерами, но они могут работать как есть.
$aside
- это просто обертка вокруг ui-bootstrap $modal
. В приведенном выше примере не используется параметр scope
:
scope
- экземпляр области видимости, который будет использоваться для модального контента (фактически модальная служба $ будет создавать дочернюю область предоставленной области). По умолчанию $ rootScope
Это важно для установления взаимосвязи между модальными и родительскими областями контроллера.
дела
$aside.open({
scope: $scope,
...
должно заставить приложение работать должным образом.