Question

我正在尝试从服务 fetchJsonDir 中的json文件中获取数据，并希望使用响应一个指令 mcsaForm 来计算json文件中的选项总数，并创建单选按钮取决于使用DOM的选项数量。我可以访问 $ http.get（） 方法中的json文件，但无法在其外部访问。

如何访问 mcsaForm 指令中的 getObj 变量，以及在何处编写用于创建的代码动态指令中的单选按钮，以便在表单加载时发生这一切？

json文件

{
"Options"           :   
        {
                "Option1"   :   "Option one",
                "Option2"   :   "Option two",
                "Option3"   :   "Option three",
                "Option4"   :   "Option four"
        }
}

服务：

myApp.service("fetchJsonDir", function($http){
var getObj;
var myJsonFilePath = "json/myNewJson.json";
$http.get(myJsonFilePath)
.success(function(response){
    getObj = response;
    console.log(getObj);        // output: json file object
});
console.log(getObj);            // output: undefined
return{
    getObjOne : getObj 
}
});

指令：

myApp.directive("mcsaForm",['fetchJsonDir', function(fetchJsonDir){
return{
    restrict: "C",
    templateUrl: "templateBlocks/multChoiceSingleSel.html",
    compile: function(element, attrs)
    {
        $("#mcss_option_list").append("How are you?");
    },
    controller: function($scope){
        $scope.getObjs = fetchJsonDir.getObjOne;
        console.log(fetchJsonDir.getObjOne);      //output: undefined
        console.log($scope.getObjs);              //output: undefined

        $scope.onSubmitHidePanel = function()
        {
            $(".mcsa_form").fadeOut("slow", function(){ 
                    $(this).remove();
            });
        }
    }
}
}]);

Answer 1

您从服务器端获取json，因此您需要等待服务器返回响应。将服务更改为：

myApp.service("fetchJsonDir", function($http){

    var myJsonFilePath = "json/myNewJson.json";

    return $http.get(myJsonFilePath)
});

指示：

myApp.directive("mcsaForm",['fetchJsonDir', function(fetchJsonDir){
    return{
        restrict: "C",
        templateUrl: "templateBlocks/multChoiceSingleSel.html",
        compile: function(element, attrs)
        {
            $("#mcss_option_list").append("How are you?");
        },
        controller: function($scope){

            fetchJsonDir.then( function( data ){

                $scope.getObjs = data.data;

            });

            $scope.onSubmitHidePanel = function()
            {
                $(".mcsa_form").fadeOut("slow", function(){
                    $(this).remove();
                });
            }
        }
    }
}]);

Answer 2

您的服务应该返回一个承诺而不是像这样的对象

myApp.factory("fetchJsonDir", function($http){
var myJsonFilePath = "json/myNewJson.json";

return{
   getObjOne : $http.get(myJsonFilePath) 
}
});

然后你可以在指令中使用它，如下所示：

myApp.directive("mcsaForm",['fetchJsonDir', function(fetchJsonDir){
 return{
    restrict: "C",
    templateUrl: "templateBlocks/multChoiceSingleSel.html",
    compile: function(element, attrs)
    {
       $("#mcss_option_list").append("How are you?");
    },
controller: function($scope){
   fetchJsonDir.getObjOne().then(function(response){
   $scope.getObjs = response.data;
 console.log($scope.getObjs);  
   });

    $scope.onSubmitHidePanel = function()
    {
        $(".mcsa_form").fadeOut("slow", function(){ 
                $(this).remove();
        });
    }
}
}
}]);

请记住，您正在发送异步Ajax请求，您需要通过promises处理异步操作。

另请注意，由于您要从服务中返回对象，因此应将其标记为factory。

将服务变量传递给指令

2 个答案: