在angularjs中,我如何将数据绑定到这个指令?

How would I bind data to this directive in angularjs

本文关键字:数据绑定 指令 angularjs      更新时间:2023-09-26

我创建了一个指令,它将在html模板中显示可选问题:

app.directive('altQuestion', ['$http', function($http) {
    'use strict';
    var directive = {
        restrict: 'E',
        transclude: true,
        scope: {
            json: '@',
            data: '='
        },
        template: function() {
            return  '<div ng-repeat="item in questionData" name="{{item.key}}" class="{{item.class}}"> '+
                        '<label class="labelHeading"> '+
                            '{{item.labelHeading}} '+
                        '</label> '+
                        '<span ng-repeat="q in item.questions"> '+
                            '<label>{{q.label}}</label> '+
                            '<input '+
                                'type="{{q.type}}" '+
                                'name="{{item.key}}" '+
                                //'ng-model="{{item.data}}" '+
                                'value="{{q.value}}" '+
                                'required'+
                            '/> '+
                        '</span> '+
                    '</div>';
        },
        link: link
    };
    return directive;
    function link(scope, elem, attr) {
        $http.get('/json/alt_questions.json').
        then(function(json) {
            scope.questionData = json.data;
            //console.log(scope.data);
            angular.forEach(scope.questionData, function (v, i) {
                angular.forEach(scope.data, function (k, index) {
                    if (v.key === index) {
                        console.log(v.data);
                    }
                });
            });
        });
    }
}]);

需要绑定的数据在

scope.data

和json中的问题信息看起来像这样:

[{
    "key": "head_brain",
    "dependent": "",
    "data": "visit.data.head_brain",
    "class": "optionBox",
    "labelHeading": "Head/brain injuries or illnesses?",
    "questions": [{
        "label": "No",
        "value": "0",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Yes",
        "value": "1",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Not Sure",
        "value": "2",
        "type": "radio",
        "req": true,
        "dis": false
    }],
    "comments": "",
    "commentKey": ""
}, {
    "key": "seizures",
    "dependent": "",
    "data": "visit.data.seizures",
    "class": "optionBox",
    "labelHeading": "Seizures or Epilepsy?",
    "questions": [{
        "label": "No",
        "value": "0",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Yes",
        "value": "1",
        "type": "radio",
        "req": true,
        "dis": false
    }, {
        "label": "Not Sure",
        "value": "2",
        "type": "radio",
        "req": true,
        "dis": false
    }],
    "comments": "",
    "commentKey": ""
}]

我需要绑定范围。对生成的每个问题进行数据建模。我会创建一个角。每个都在表格上吗?我如何在孤立的范围内做到这一点?

这是一个活塞:http://plnkr.co/edit/REOg53RgGUwb0OF3Fn1f

在柱塞中需要发生的是,当它加载时需要根据传入隔离作用域的主控制器中的数据集选择单选按钮

有两种方法可以做到这一点。稍加修改:http://plnkr.co/edit/nSUb6WH5B9xD3fFnklc9?p=preview

'ng-model="$parent.$parent.$parent.visit.data[item.data]"

这里需要三个$parent,因为你想要到达隔离作用域之外。要做到这一点,你需要访问$parent作用域,但是两个ng-repeat创建了它们自己的作用域,所以你的指令的真正的父作用域将是$parent.$parent.$parent.

更好的方法是避免这种直接使用,并像第二个例子一样提供model as属性http://plnkr.co/edit/QDhpb9DgUMaUBdQVO79q?p=preview

scope.$parent.$watch(attr.model, function(newVal) {
  scope.model = newVal;
});

然后,按如下方式使用:

'ng-model="model[item.data]" '