1

我正在使用 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 值的显示语句永远不会起作用。

当我点击按钮时，我将如何解决这个问题，以便我的 HTML 的最后一行正确更新为 testVar 的值？

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

4

2 回答 2

1

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

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

@使结果范围变量成为带有插值的字符串。

于 2013-02-15T22:00:04.100 回答
1

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

ng-model声明采用角度表达式并在范围内评估它们，因此无需大括号强制评估。事实上，牙套会把事情搞砸。

// so just
ng-model="valvar"

这是对您的代码进行这些更改的小提琴。

于 2013-02-16T00:59:16.217 回答