uib-btn-radio 不适用于 $scope 但适用于 "controller as" 语法？

Question

我正在尝试像这样创建一个简单的 btn-group

<div class="btn-group">
    <label class="btn btn-primary" 
    ng-model="radioModel" 
    ng-repeat="playerClass in playerClasses" 
    ng-class="{{ playerClass.buttonClass }}" 
    uib-uncheckable='false' 
    uib-btn-radio="{{ playerClass }}">{{ playerClass.className }}</label>
</div>

在控制器中有了这个

$scope.playerClasses = cardFactory.getClasses();
$scope.radioModel = { className: 'value', buttonClass: 'value'};

但是每当我点击其中一个按钮时，radioModel 并没有改变，这导致多个按钮处于活动状态

我用 "controller as" 语法切换 $scope 并解决了问题，但问题是我在整个项目中使用了 $scope 语法，我不希望只有一个控制器具有 "controller as"和其他人有 $scope.

我的问题是，有没有办法让 uib-btn-radio 与 $scope 一起工作而不是 "controller as"？

Answer 1

如果您不想使用 'controller as'，请在您的模型变量中添加一个点

ng-model="data.radioModel"

这里有一个很好的解释（第 2 项和第 3 项） https://www.toptal.com/angular-js/top-18-most-common-angularjs-developer-mistakes

Answer 2

每个由 ng-repeat 指令实例化的模板都会创建自己的子作用域，并且可以使用 $parent 访问 ng-repeat 周围的作用域。所以快速修复是：

ng-model="$parent.radioModel"

工作代码：https://jsfiddle.net/Lzs2sr54/

uib-btn-radio 不适用于 $scope 但适用于 "controller as" 语法？

uib-btn-radio not working with $scope but works with "controller as" syntax?

javascript

angularjs

angular-ui-bootstrap