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

【问题标题】：AngularJS model changes not shown in GUI after directive changes it指令更改后，AngularJS 模型更改未显示在 GUI 中
【发布时间】：2014-07-12 06:35:34
【问题描述】：

我有一个模型问题：

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

我有一个按钮（在上面模型的 div 中和 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) 方法分配了 scope.currentAudio = myCurrentAudio，它在遍历列表时工作正常，但是当我停止它并尝试单击我的按钮时，它不再改变。

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

编辑：我添加了：

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

但没有运气。感谢您的帮助。

【问题讨论】：

能否请你设置一个plunker，没有得到PlayNextAudio和changeCurrentAudio之间的关系或提供完整的代码或plunker可能是

标签： angularjs angularjs-directive angularjs-scope angular-ui

【解决方案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 示例。

【讨论】：