通过 ng 模型应用 ng 样式

Question

可能是一个菜鸟问题，但我对角度有点陌生。

我正在尝试通过 ng-model 指令更新 ng 样式的值，但我不太确定我在这里做错了什么。我试图实现的目标是让div 中的文本通过对单选按钮所做的选择来对齐。

我在下面发布了我正在尝试做的事情的小提琴。标记的基本结构如下所示。对我在这里做错了什么有什么想法吗？

<div ng-app>
<div ng-controller="alignmentCtrl">
    <div ng-style="{'text-align': title}">This title should be aligned: {{title}}</div>
    <div class="radio-buttons">
        <input id="left" name="align" type="radio" value="Left" ng-model="title = 'left'">
        <label for="left">Left</label>
        <input id="center" name="align" type="radio" value="Center" ng-model="title = 'center'">
        <label for="center">Center</label>
        <input id="right" name="align" type="radio" value="Right" ng-model="title = 'right'">
        <label for="right">Right</label>
    </div>
</div>

http://jsfiddle.net/skooliano/bvnGP/7/

Answer 1

你的jsfiddle有几个错误。

最好在"框架和扩展"中设置纯JS并且没有包装，然后将链接添加到angular作为外部资源。然后在"小提琴选项"中使用 ng-app 属性设置正文标签

此外，您正在未定义的app上调用 .controller。您应该将其更改为从angular.module('wdLayout', []);返回wdLayout

var wdLayout = angular.module('wdLayout', []);
wdLayout.controller('alignmentCtrl', ['$scope', function ($scope) {
    $scope.title = "Left";
}]);

这是工作小提琴： http://jsfiddle.net/qk53G/