Question

我使用Angular，jQuery和Isotope.js制作了一个Web应用程序。这是我的视图模板中的相关代码：

<head>
    <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/isotope.min.js"></script>
    <script type="text/javascript" src="../Scripts/trackpad-scroll-emulator/jquery.trackpad-scroll-emulator.min.js"></script>
    <script type="text/javascript" src="../Scripts/angular.js"></script> 
    <script type="text/javascript" src="../Scripts/angular-route.min.js"></script>
</head>

<body ng-app="App">
    <div id="main-container" data-ng-controller="MessageController">
        <div ng-switch="moduleState">
            <div ng-switch-when="messagespanel">
                Messages panel here !
                <nav id="activity-panels">
                   <ul>
                      <li>menu1</li>
                      <li>menu2</li>
                   </ul>
                </nav>
            </div>
            <div ng-switch-when="settingspanel"> 
                Settings panel here !
            </div>
        </div>
    </div>
</body>

事实上，我已经设置了一个按钮，可以在 messagespanel 和 settingspanel 之间切换 moduleState 值。

当我点击两次时，我完全切换回我的消息面板视图，但是jQuery和isotope.js再次无法工作。

例如，在切换后这将无效：

$("nav#activity-panels > ul > li").on("click", function () {
      console.log("ok");
}

奇怪的是，我的滚动条是由trackpad-scroll-emulator Js库自定义的，这将继续工作。但我的jquery和同位素代码都没有。

我已经做了一些搜索，当然ngSwitch指令决定是否创建一个DOM片段。但是如果在第一次切换后重新创建它，我的jQuery选择器应该再次识别我的DOM元素？或者我必须刷新一些东西，或重新加载jQuery？

感谢您的帮助，

Answer 1

在使用angularJS时，你应该使用类似的jquery，你必须使用角度内部机制来正确绑定html和click之类的事件。从不在代码中找到.on('click', ...)函数。 You should definitely read that post.

相反，您应该使用专用的directive来插入ng-click函数

这样，您的ngSwitch将动态创建/删除directive并自动启用/禁用ngClick功能，而无需手动添加onClick事件。

AngularJs ngSwitch指令打破了我的其他javascript库

1 个答案: