将服务变量传递给指令

Question

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

如何访问 getObj 变量 mcsaForm 指令以及我在哪里编写用于在指令中动态创建单选按钮的代码，以便它全部发生在表单加载时？

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

你的服务应该return一个承诺而不是像这样的对象

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来处理异步操作。

另请注意，由于您正在 return 从您的服务中获取对象，因此应将其贴标为 factory。

将服务变量传递给指令

pass service variables to directive

angularjs

angularjs-directive

angular-services