Question

我创建了一个单一的答案调查，我想把它翻译成一个指令。我是一个答案，因为只能同时选择一个答案，并根据所选答案触发x或y函数（也是ng-class）。

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

Answer 1

问题是，所有my-continent指令都有不同的隔离范围，因此每个后点击它都会scope.continent == 1。< / p>

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

内置在radio输入组和标准角形式之上。
使用$parent.continent并为其指定不同的值（实际上是不好的做法）。
使用带有 transclusion 的单一指令（其中将选项转换为'parent'指令）。

我会为您选择，因为这取决于您决定的整体架构。

Answer 2

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

小提琴：http://jsfiddle.net/pascalockert/xRy7H/1/

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

2 个答案: