Question

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

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

服务代码：

ResultSet objects are returned through second parameter of the success callback for the tx.executeSql() method on a Transaction (see above). They have the following form:
{
  insertId,
  rowsAffected,
  rows: {
    length,
    item(),
    _array,
  },
}

自定义指令：

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

Answer 1

@doublesharp，您绝对正确。问题在于数据绑定和作用域。

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

scope.settingsService = this.settingsService;

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

在视图中正确访问值。

使用

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

代替

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

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

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

1 个答案: