使用http的Angularjs自定义指令承诺不与模板绑定 [英] Angularjs custom directive using http promise not binding with template

问题描述

我是angularjs的新手，想在现有代码中添加新功能.但是代码无法按预期工作.我知道我的做法不正确.请纠正我错误的地方. 我不知道为什么在这种方法中不使用控制器而是使用指令?

I am new to angularjs and want to add new feature in existing code. But code is not working as expected. I know i am not doing it the right way. Please correct me where is the mistake. I don't know why controller is not used but directive is used in this approach?

这是我的自定义服务和自定义指令指令代码.

Here is my custom service and custom directive directive code.

服务代码:

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

在指令中的回调内成功检索到了服务响应.但是此响应并不与视图绑定.

The service response is retrieved successfully inside callback in directive. But this response is not binding with view.

一段模板代码是:

<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，您绝对正确.问题在于数据绑定和作用域.

@doublesharp, you are absolutely right. The problem was with data binding and scoping.

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

1. First we need to bind the data properly inside App directive, so it is available in the view.

scope.settingsService = this.settingsService;

scope.settingsService = this.settingsService;

我刚才做的正确.因为仅使用"this"运算符，其作用域就位于promise回调函数内. "this"运算符不能代表控制器/指令级别.

Which I was doing already right. Because simply with 'this' operator, its scope was inside the promise callback function. 'this' operator was not representing for controller/directive level.

1. 在视图中正确访问值.

使用

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

代替

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

使用ctrl(即controllerAs)访问内部视图中的变量/对象不符合指令的范围.因为指令级别的绑定不是使用'this'运算符进行的.

Accessing the variable/object inside view with ctrl (i.e controllerAs) was not according to scope of directive. Because binding at directive level was not with 'this' operator.

这篇关于使用http的Angularjs自定义指令承诺不与模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！