Угловая - две одинаковые директивы с разными данными - изолированная область видимости

0

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

У меня есть веб-сервис, написанный на ASP.NET. Я получаю данные в JSON, используя jQuery.ajax, завернутый в функцию:

function getData(id) {
    var params = { "PlannerId": id };
        jQuery.ajax({
            type: "POST",
            url: "Default.aspx/getData",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(params),
            dataType: "json",
            traditional: true,
            async: false,
            success: function (msg) {
                $scope.allSeminars = allSeminars.concat(msg.d.SeminarDays);
            }
        }); 
    return $scope.allSeminars;
}

Функция помещается в контроллер, чтобы сказать "dataController".

Обычно для отображения моей директивы один раз. Я вызываю свою функцию (также в моем контроллере) с некоторым "id", который я получаю от динамического ввода.

getData(jQuery('div[display-data]').parent().find('input').val()); а затем вызывать директиву:

<div display-data></div> и он работает для одной информации и одной директивы.

Теперь я хочу дважды отобразить свою директиву на моей веб-странице с разными данными в каждом.

Я добавил выделенную область действия в свою директиву:

rfg.directive("displayData", ['someService', function (someService) {
    return {
        restrict: "A",
        scope: {
            seminar: '=sem'
        },
        templateUrl: '../../template.tpl.html',
        controller: 'dataController',

Теперь я показываю свою директиву следующим образом:

<div display-data sem="sem0"></div><br>
<div display-data sem="sem1"></div>

И мой контроллер выглядит так:

var semId = jQuery('div[display-data]');
$scope.sem0 = getData(jQuery(semId[0]).parent().find('input').val());
$scope.sem1 = getData(jQuery(semId[1]).parent().find('input').val());

Я также попытался добавить "семинар" (тот, который указан в области действия) в ng-repeat в моем шаблоне, но без успеха.

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

Спасибо!

1 ответ

0

Я думаю, что ваша логика неверна, вы не должны использовать jQuery с AngularJS.

Вы можете заменить jQuery.ajax() на $http или ngRessource

https://docs.angularjs.org/api/ng/service/$http

https://docs.angularjs.org/api/ngResource

Вместо выполнения этого jQuery(semId[0]).parent().find('input').val() использовать ng-model

https://docs.angularjs.org/api/ng/directive/ngModel

При этом вы можете начать с хорошей основы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню