Question

我正在尝试构建一个角度指令，如下所示

<!DOCTYPE html>
<html lang="en"  ng-app="directiveModule">
<head>
    <meta charset="UTF-8">
    <title> Angular Json From</title>
</head>

<body>

<h3> Angular Json From</h3>

<div  ng-controller="mapController">

    <json-from json-config=jsonConfig></json-from>
</div>


</div>
<script>
    var app = angular.module("directiveModule", []);
    app.controller('mapController', [ '$scope', function($scope) {

        $scope.jsonConfig={

            "sensorName" : {
                "type" : "String",
                "description" : "Enter sensorName",
                "label":"Model Number",
                "required":true
            },
            "sensorDescription" : {
                "type" : "String",
                "description" : "Enter sensorDescription",
                "label":"Registration Number",
                "required":false
            },
            "latitude" : {
                "type" : "Number",
                "description" : "Enter latitude",
                "label":"latitude",
                "required":false
            },
            "longitude" : {
                "type" : "Number",
                "description" : "Enter longitude",
                "label":"longitude",
                "required":false
            }

        }



    }])

    app.directive('jsonFrom', function() {




        function link(scope, elem, attrs) {
            if(scope.jsonConfig){

                createForm(scope.jsonConfig)
            }
        }

        function createForm(jsonConfiguration) {
            var extractedData=[]

            var k = Object.keys(jsonConfiguration);
            k.forEach(function (objkey, index) {
                var obj = {
                    "name": splitCamelCase(objkey),
                    "realName": objkey,
                    "type": jsonConfiguration[k[index]].type,
                    "description": jsonConfiguration[k[index]].description,
                    "model": jsonConfiguration[k[index]].label
                };

                extractedData.push(obj);

            });
            console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&")
            console.log(extractedData)

        }

        function splitCamelCase (s) {
            return s.split(/(?=[A-Z])/).join(' ').split('_').join(' ').split('-').join(' ');
        };

        return {
            scope: {
                jsonConfig:'='
            },
            link: link,
            templateUrl: 'template.html',
            controller: "jsonFormCtrl",
        };

    })
</script>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="controller/fromController.js"></script>



</body>
</html>

我可以从视图到指令获取数据（示例配置：jsonConfig），但我不知道如何将数据从指令推送到模板URL中的模板

即，在示例中如何获取extractData的值，该值是函数内部的局部变量，是模板url中指定的模板

我应该在哪个范围内定义extractData变量以进入模板

Answer 1

首先改变html中的指令调用，

<json-from json-config=jsonConfig></json-from>

到

<json-from json-config={{jsonConfig}}></json-from>

在指令中获取$ scope.jsonConfig。

接下来，指令中的内部链接功能

function link(scope, elem, attrs) {
        if(scope.jsonConfig){

            createForm(scope.jsonConfig)
        }
}

attrs.jsonConfig可以访问传递的属性，将其分配给范围变量

function link(scope, elem, attrs) {
  scope.canBeViewedInHtml = JSON.parse(attrs.jsonConfig);       
  if(scope.jsonConfig){
            createForm(scope.jsonConfig)
  }
}

并且

<div>{{canBeViewedInHtml}}</div>

可以在指令的templateUrl中使用。

将angularjs指令链接函数的值传递给templateurl

1 个答案: