javascript - AngularJS:モデル値の切り替えはUIに影響しません

原文 javascript angularjs

ディレクティブを作成し、link:メソッドでいくつかのモデルを開始してから、テンプレートの<a>タグにクリックイベントをバインドします。スコープモデルが値を相互に切り替える場所。

コンソールでモデル値を確認すると、問題なく動作しているようです。ただし、UIには反映されません。

これが私のフィドルです:http://jsfiddle.net/gp32g7sr/7/
答え
ダイジェストサイクルを実行するには、スコープを$applyにする必要があります。イベントからスコープ変数を変更しても、手動で実行する必要がある角度ダイジェストサイクルは実行されません。

リンクFn

    link: function (scope, element, attrs) {
        scope.activeContinent = 'Asia';
        scope.altContinent = 'America';
        element.find('a').on('click', function (e) {
            e.preventDefault();
            var x = scope.altContinent;
            scope.altContinent = scope.activeContinent;
            scope.activeContinent = x;
            document.querySelector('#log')
                .innerHTML = scope.activeContinent + '&nbsp;&nbsp;' + scope.altContinent;
            //$compile(document.querySelector('#log'))(scope);
            scope.$apply();
        });
    }


Working Fiddle
関連記事

javascript - アニメーションの完了後にjquery関数を実行するにはどうすればよいですか?

javascript - 毎回コマンドを実行せずにCSSの変更を確認する方法

javascript - Jqueryで読み込まれたページのURLを変更する

javascript - ng-repeat内のng-modelの設定が機能しない

javascript - 1つのソースのみからイベントを抽出する方法

javascript - ng-repeat内で呼び出されたAngular $ broadcastが複数回起動する

javascript - session.lastAccessedTimeをJavaScript日付オブジェクトに変換します

javascript - javascript 4ボタン、2動作

javascript - ExpressおよびCheerio / JSDOM

javascript - ifが機能しない場合のclearInterval