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

Javascript 使用AngularJS指令创建单个正确答案调查,javascript,angularjs,twitter-bootstrap,angularjs-directive,Javascript,Angularjs,Twitter Bootstrap,Angularjs Directive,我已经创建了一个单一答案调查,我想把它转换成一个指令。这是一个单一的答案,因为同一时间只能选择一个答案,它会根据选择的答案触发x或y函数 我有工作的功能,没有在这个指令。正如您将看到的,每个链接都会触发不同的ng单击 <div class="col-md-4"> <a class="btn col-md-12" ng-click="continent='1'" ng-class="{'active' : continent == '1'}">North Americ

我已经创建了一个单一答案调查,我想把它转换成一个指令。这是一个单一的答案,因为同一时间只能选择一个答案,它会根据选择的答案触发x或y函数

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

<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>
我的问题是,这种方法不起作用,或者更好,我不知道如何将其转换为指令。你可以看到这张照片

而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: '@'
        }
    };
});

问题是,所有my Continental指令都有不同的隔离作用域,因此单击后每个指令都有scope.continental==1

您可以在任何可用的解决方案中修改指令:

内置在无线电输入组和标准角度形式的顶部。 使用$parent.contraction并为其指定不同的值实际上是一种错误的做法。 使用带有转换的单个指令,其中选项被转换为“父”指令。
我将留给您选择,因为这取决于您的决策的总体架构。

问题是,您所有的my Continental指令都有不同的独立作用域,因此单击后每个指令都有作用域。Continental==1

您可以在任何可用的解决方案中修改指令:

内置在无线电输入组和标准角度形式的顶部。 使用$parent.contraction并为其指定不同的值实际上是一种错误的做法。 使用带有转换的单个指令,其中选项被转换为“父”指令。
我将留给您选择,因为这取决于您的决策的总体架构。

我认为最简单和干净的方法之一是使用=,将控制器的scope变量传递给您的指令scope。您可以将选定的大陆保存在此变量中,并在多个指令实例中使用它


Fiddle:

我认为最简单和干净的方法之一是使用=,将控制器的scope变量传递给指令scope。您可以将选定的大陆保存在此变量中,并在多个指令实例中使用它


小提琴:

神奇的东西。谢谢正如米格先生所指出的,使用$parent并不是一个好的实践。我编辑了答案以显式传递目标范围变量。用这个,它更干净,同样简单:神奇的东西。谢谢正如米格先生所指出的,使用$parent并不是一个好的实践。我编辑了答案以显式传递目标范围变量。使用这个,它更干净,也更简单: