javascript - rootScope とやり取りするディレクティブが Angular JS で機能しない

Question

rootScopeモーダルを表示するためにと対話しようとしています。rootScopeと組み合わせて使用​​しようとしている非常に基本的なディレクティブがありng-showます。

ディレクティブのコードは次のとおりです。

.directive('modal', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        templateUrl: 'view/templates/modal-confirm.tpl.html',
        link: function (scope, element, attrs) {
            console.log(scope);

            element.on('click', function() {
                scope.$root.confirmModal.isVisible = true;
                console.log('open modal');
            });
        }
    }
}])

変数をログに記録すると、更新されたscopeことが示されますが、モーダルは表示されません。を に変更すると、同じ結果が得られます。console.log は機能していますが、モーダルは表示されません。$rootisVisible: truescope.$root.confirmModal.isVisible = true;$rootScope.confirmModal.isVisible = true;

これはモーダル テンプレートのコードです。

<!-- Confirm Modal Template -->
<div ng-if="$root.confirmModal.isVisible" class="overlay">
    <div class="overlay-content extended">
        <span>{{ $root.confirmModal.content }}</span>
        <div class="buttons">
            <button ng-click="$root.confirmModal.isVisible = false;" class="btn btn-default half">Cancel</button>
        </div>
    </div>
</div>

$rootScopeディレクティブでと対話することはできませんか?

scopeの代わりに使用して更新されたコード$rootScope:

.directive('modal', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        templateUrl: 'view/templates/modal-confirm.tpl.html',
        link: function (scope, element, attrs) {
            scope.isVisible = false;

            element.on('click', function() {
                scope.isVisible = true;
                console.log(scope);
                console.log('open modal');
            });
        }
    }
}])

<!-- Confirm Modal Template -->
<div ng-if="isVisible" class="overlay">
    <div class="overlay-content extended">
        <span>hello world</span>
    </div>
</div>

しかし、同じ結果。