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

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

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

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

// so just
ng-model="valvar"

Here's a fiddle with your code with these changes.

Answer 2

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

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

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