Пользовательская директива Angularjs, использующая обещание http без привязки к шаблону

Question

Я новичок в angularjs и хочу добавить новую функцию в существующий код.Но код работает не так, как ожидалось.Я знаю, что делаю это неправильно.Пожалуйста, исправьте меня, где ошибка.Я не знаю, почему контроллер не используется, но в этом подходе используется директива?

Вот мой код службы и пользовательская директива.

Сервисный код:

angular.module("quickquiz-builder").service("SettingsService", function ($http, $q) {
    return {
    /* Return deffered promise response */
        get: function() {
            var deferred = $q.defer();
            $http.get('get.php')
            .then(function(response){
                var config = response.data.config;
                config = JSON.parse(config);
                this.generalSettings = config.settings;
                deferred.resolve(this);
            })
            .catch(function(response){
              deferred.reject(response);
            });
            return deferred.promise;
        }
    }
})

Пользовательская директива:

angular.module("quickquiz-builder").directive("quizbuilderSettings", ["SettingsService", "QuestionsService", "$filter", function (SettingsService, QuestionsService, c) {
    return {
        restrict: "E",
        scope: {},
        templateUrl: "templates/settings.html",
        controllerAs: "ctrl",
        controller: ["$scope", function (scope) {
            SettingsService.get().then(function (data){
    /* get response from service inside callback */
                this.settingsService = data;
                scope.settingsService = this.settingsService;
                this.questionsService = QuestionsService;
                console.log(1);
                console.log(scope.settingsService.generalSettings);
                console.log(1+' end');
            }).catch(function(e){
                console.dir(e);
            });
        }]
    }
}])

Ответ службы успешно получен внутри обратного вызова в директиве.Но этот ответ не является обязательным для представления.

Часть кода шаблона:

<div layout="row" class="option">
    <md-switch class="md-primary var-label" aria-label="graded" ng-model="ctrl.settingsService.generalSettings.graded" ng-change="ctrl.onChangeGraded()">
         <strong>Graded</strong>
    </md-switch>
    <p flex=""><span ng-if="ctrl.settingsService.generalSettings.graded">The quiz has at least one graded question (a question that has a right/wrong answer).</span><span ng-if="!ctrl.settingsService.generalSettings.graded">It's not a graded quiz.</span>
    </p>
</div>

Answer 1

@ doublesharp, вы абсолютно правы. Проблема была с привязкой данных и областью видимости.

1. Сначала нам нужно правильно связать данные внутри директивы App, чтобы они были доступны в представлении.

   scope.settingsService = this.settingsService;

Что я уже делал правильно. Потому что просто с оператором «this» его область была внутри функции обратного вызова обещания оператор 'this' не представлял для уровня контроллера / директивы.

2. Доступ к значению правильно в поле зрения.

Использование

<element nm-model="settingsService.generalSettings.graded"></element>

Вместо

<element nm-model="ctrl.settingsService.generalSettings.graded"></element>

Доступ к переменной / виду изнутри объекта с помощью ctrl (т.е. controllerAs) не соответствовал объему директивы. Потому что связывание на уровне директивы не было с оператором this.