使用http承诺的Angularjs自定义指令未与模板绑定

我是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);
            });
        }]
    }
}])

自定义指令：

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);
            });
        }]
    }
}])

已在回调in指令内成功检索服务响应。但这一反应与观点并不一致

一段模板代码是：

<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>

分级
该测验至少有一个分级问题（答案正确/错误的问题）。它不是分级测验。

@doublesharp，你完全正确。问题在于数据绑定和作用域

首先，我们需要在App指令中正确绑定数据，以便它在视图中可用

scope.settingsService=此.settingsService

我已经做对了。因为只要使用'this'运算符，它的作用域就在promise回调函数中此“运算符”未表示控制器/指令级别

在视图中正确访问该值
使用



而不是

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



使用
ctrl
（即controllerAs）访问变量/对象内部视图不符合指令范围。因为指令级的绑定不是与“this”操作符绑定。
限制：“E”
意味着它应该是一个元素，比如
。请包括指令所在的代码。为了可读性，最好不要将
$scope
别名为
scope
。元素正好存在于它应该存在的位置。这个问题似乎与回电有关。指令内部的回调（get（）.then函数）中编写的代码未与视图绑定。若我不使用回调并从服务返回静态值，并在指令中使用它而不使用回调（那个么），那个么它工作得非常好。我不明白ng model将回调的问题是什么……它可能与您的作用域有关，但如果没有更多的代码就无法判断。