Question

我正在使用AngularJS创建问卷表单，并且我正在模仿我保持HTML轻量级的不同类型的问题。

HTML：

<qtnyesno qtn-variable="testVar">This is a test question. Yes or No?</qtnyesno>
testVar = {{testVar}}

JS：

var module = angular.module('app', [])
.directive('qtnyesno', function() {
        return {
                restrict: 'E', // must be an HTML element
                transclude: true,
                scope: {
                        valvar: '@qtnVariable',
                },
                template:
                    '<div>' +
                    '<label ng-transclude></label>' +
                    '<label class="radio inline"><input type="radio" name="rdo{{valvar}}" value="1" ng-model="{{valvar}}">Yes </label>' +
                    '<label class="radio inline"><input type="radio" name="rdo{{valvar}}" value="0" ng-model="{{valvar}}">No </label>' +
                    '<hr></div>',
                replace: true,
        };
});

当我在输入标记 ng-model =“{{valvar}}”中使用时，我收到编译错误。

当我尝试使用 ng-click =“{{valvar}} = 0”时，我没有编译错误，但是当我点击时，获取testVar值的显示语句永远不会有效单选按钮。

我如何修复此问题，以便在点击按钮时使用testVar的值正确更新HTML的最后一行？

我正在使用AngularJS和Bootstrap。我对这两个框架都很新，所以我不确定这是否是最好的方法。

Answer 1

要在隔离范围内获得双向绑定，请使用=：

scope: {
  valvar: '=qtnVariable',
},

@使得到的范围变量成为带插值的字符串。

Answer 2

Brandon是的，在你的隔离范围中使用=来获得双向绑定，但还有一件事需要做：从你的ng-model声明周围删除花括号。

ng-model声明采用角度表达式并在范围内对其进行评估，因此不需要大括号来强制进行评估。事实上，大括号会搞砸。

// so just
ng-model="valvar"

Here's a fiddle with your code with these changes

在AngularJS中，如何使用指令创建具有更改变量名称的模板？

2 个答案: