javascript - 使用 AngularJS 指令创建单个正确答案调查

标签 javascript angularjs twitter-bootstrap angularjs-directive

我创建了一个单一答案调查,我想将其转化为指令。我不是一个单一的答案,因为只能同时选择一个答案,并且它会根据所选答案触发 x 或 y 函数(也是 ng 类)。

我在这个 jsfiddle 中有没有指令的工作功能.正如您将看到的,每个链接都会触发不同的 ng-click。

<div class="col-md-4">
   <a class="btn col-md-12" ng-click="continent='1'" ng-class="{'active' : continent == '1'}">North America</a>
</div>
<div class="col-md-4">
   <a class="btn col-md-12" ng-click="continent='2'" ng-class="{'active' : continent == '2'}">South America</a>
</div>

我的问题是这个方法在翻译成指令时不起作用(或者更好的是,我不知道该怎么做)。你可以看到 jsfiddle with the directive here .

和 js:

.directive('myContinent', function() {

    return{
        restrict: 'E',
        template: '<div class="col-md-4"> \
                <a class="btn col-md-12" ng-click="continent=\'1\'" ng-class="{active : continent == \'1\'}">{{text}} \
        </a> \
              </div>',
        replace: true,
        scope: {
            text: '@'
        }
    };
});

最佳答案

我认为最简单和干净的方法之一是将 Controller 的范围变量传递给您的指令范围(使用 =)。您可以将所选大洲保存在此变量中,并在多个指令实例中使用它。

fiddle :http://jsfiddle.net/pascalockert/xRy7H/1/

关于javascript - 使用 AngularJS 指令创建单个正确答案调查,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22115421/

相关文章:

html - 如何对齐两个 DIV 之间的元素

javascript - 在 setInterval AJAX 之间保留 jQuery 生成的标记

javascript - 开 Jest - 在描述 block 中导入多个测试,重用 beforeEach() 中定义的变量

javascript - 在 Angular.js 中动态加载模板(部分)

javascript - 如何检测iframe是否以 Angular 完全加载

javascript - AngularJS 使用 $interval

HTML、CSS、flask_wtf 如何更改表单字段位置

html - 我可以锁定 Twitter Bootstrap 表中的第一列吗?

javascript - 使用函数 "some"比较 2 个属性

javascript - 用javascript将一个HTML节点分割为多个节点