角度インクルードでhtmlのjavascriptを介してdividにアクセスできません

debugcn 投稿 Dev

マストロ

OK-コードを追加するように編集しました。

角度インクルードであるhtmlページの要素にバインドするJavaScript関数を取得できません。

これは機能します：

<button id="toggleMessage">Click Me</button>

<script src="/Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    var myapp = angular.module('myapp', []);

    var globalFunctions = function () {
        var init = function () {
            toggleMenuLeft();
        };

        var toggleMenuLeft = function () {
            $('#toggleMessage').bind('click', function (e) {
                alert("Hello");
            });
        };

        return {
            init: init,
        };
    }();

    //Load global functions
    $(document).ready(function () {
        globalFunctions.init();

    });
</script>

そのボタンをインクルードに移動すると、機能しなくなります。.clickを.onに変更しようとしましたが、それでも機能しません。

#ParentPage.html

<body ng-app="myapp">
    <div ng-include="'/IncludePage.html'"></div>

    <script src="/Scripts/jquery-2.1.0.min.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script type="text/javascript">
        var myapp = angular.module('myapp', []);

        var globalFunctions = function () {
            var init = function () {
                toggleMenuLeft();
            };

            var toggleMenuLeft = function () {
                $('#toggleMessage').bind('click', function (e) {
                    alert("Hello");
                });
            };

            return {
                init: init,
            };
        }();

        //Load global functions
        $(document).ready(function () {
            globalFunctions.init();
        });
    </script>
</body>

#IncludePage.html
<button id="toggleMessage">Click Me</button>

topnavインクルードから呼び出される実際のコードは、leftnavインクルードで＃toggle-leftを検索します。https://gist.github.com/anonymous/11084106

#RealCode - For Matt

var toggleMenuLeft = function () {
        $(document).on('click', '#toggle-left', function (e) {
            if (!$('.sidebarRight').hasClass('.sidebar-toggle-right')) {
                $('.sidebarRight').removeClass('sidebar-toggle-right');
                $('.main-content-wrapper').removeClass('main-content-toggle-right');
            }
            $('.sidebar').toggleClass('sidebar-toggle');
            $('.main-content-wrapper').toggleClass('main-content-toggle-left');
            e.stopPropagation();
        });
    };

マストロ

ああ、私はこの答えを見つけました：マットが言ったことと一致しているAngularJSテンプレート内でjQueryクリックイベントが発生していません。代わりに、それをドキュメント要素に配置する必要がありました。

解決

 var toggleMenuLeft = function () {
                $(document).bind('click', '#toggleMessage', function (e) {
                    alert("Hello");
                });
            };

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]