Question

我有一个问题，我有一个模型：

<div ng-model="currentAudio">...</div>

我有一个按钮（在上面模型的div中的ng和ng-repeat中）：

<button ng-click="changeStuff(myAudioObj)">My Button</button>

当我点击按钮时，更改内容会更改currentAudio模型，我的GUI会显示更改（我显示对象的ID）。

但我的问题是当我的指令改变了“currentAudio”然后我尝试用我的按钮再次更改它时，更改没有显示。

MyApp.directive('audioplayer', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('ended', function (evt) {
                PlayNextAudio(scope);
            });
        }
    };
});

我的PlayNextAudio（范围）方法指定scope.currentAudio = myCurrentAudio，它在列表中运行正常，但当我停止此操作并尝试单击我的按钮时，它不会再改变。

就好像它在某个其他线程上并且卡在指令线程上。我的控制台输出显示按钮正确分配给我的currentAudio模型。

编辑：我添加了：

scope.$apply(function () {
    scope.changeCurrentAudio(scope.myCurrentAudio);
});

但没有运气。谢谢你的帮助。

Answer 1

ng-repeat会创建子范围，因此myCurrentAudio不再是预期范围的一部分。

要解决此问题，需要"always use the dot in ng-model"规则。

<div ng-model="audio.current">...</div>

<button ng-click="audio.changeSong(audio.myAudioObj)">My Button</button>

以下是没有点的示例：http://plnkr.co/edit/GKf7WhnnItVNeBpvSB0F?p=preview
以下是点的示例：http://plnkr.co/edit/aESrHtuSH9cd9ljyQAfH?p=preview

如果这对您不起作用，请提供完整的ng-repeat html源代码或plnker示例。

在指令更改后，AngularJS模型更改未在GUI中显示

1 个答案: