Question

我创建了一个指令，它将在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": ""
}]

我需要在生成的每个问题上将scope.data绑定到ng-model。我会在表单上创建一个angular.each吗？我怎么能在孤立的范围内做到这一点？

这是一个掠夺者：http://plnkr.co/edit/REOg53RgGUwb0OF3Fn1f

在plunker中需要做的是，当根据主控制器中设置的数据加载到单独的范围时，需要选择单选按钮。

Answer 1

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

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

此处需要三个$ parent，因为您希望超出隔离范围。为此，您需要访问$ parent范围，但是两个ng-repeats创建了自己的范围，因此您的指令的真正父范围将是$ parent。$ parent。$ parent。

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

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

然后，按如下方式使用它：

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

如何在angularjs

1 个答案: