Question

我在使用带Angular的SPA时，在渲染特定页面后尝试在我的页面中使用一些jquery。但问题是jquery代码不起作用，控制台上也没有错误。

希望你能帮助我，这是我的代码：

app.js：

＆＃13;

var app = angular.module('app', ['ngRoute', 'angularCSS']);

app.config(function($routeProvider){
    
    $routeProvider
    
    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController',
        css: 'styles/main.css'
    })

    .when('/second', {
        templateUrl: 'pages/second.html',
        controller: 'secondController',
        css: ['styles/second.css', 'styles/second_2.css'] 
    }); 
});

app.controller('mainController', ['$scope', function($scope){
    
    
}]);

app.controller('secondController', ['$scope', function($scope){
    
    
}]);

the main page, index.html:

＆＃13;

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <title>Untitled Document</title>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" href="styles/viewbox.css">
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="angular-css.js"></script> 
        <script src="app.js"></script> 
    </head>
    <body>
        <div>
            <h3><a href="#/">Main</a></h3>
            <h3><a href="#/second">Second</a></h3>
        </div>    
        
            <ng-view></ng-view>
         
    </body>
</html>

＆＃13;

这是模板，second.html：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.viewbox.js"></script>
<script>

    $(function(){

        $('img').click(function(){
            alert("my img");
        });


    })

</script>

<h1>Hello, this is Second Page</h1> 

<img src="pic1.jpg" alt="" width="250" height="250">

＆＃13;

Answer 1

在这里，我同意@ War10ck你应该坚持AngularJS以避免将来的复杂性。您需要将此功能放入控制器中，如下所示：

app.controller('mainController', ['$scope','$window', function($scope, $window){

$scope.myFunction = function(){
window.alert("my img");
};

}]);

HTML code：

<img src="pic1.jpg" ng-click="myFunction()" alt="" width="250" height="250">

你不应该在AngularJS的顶部使用jQuery，因为如果我们使用JQuery进行任何角度DOM操作或范围变量操作，AngularJS摘要周期就不会运行。

当您将jQuery组件迁移到AngularJS时，您需要遵循以下内容：

首先需要搜索angular-ui-bootstrap网站，因为它们覆盖了已经转换为angular的大部分UI组件。我确定你不会找到每个插件的Angular版本，因为你应该将该插件包装到指令中。这将为您提供控制器，而不是任何指令所在的DOM元素。（Example这里是使用指令的Datepicker）

不要尝试从外部角度上下文绑定事件，这将创建一个摘要周期，这将导致影响UI上的绑定更新。

确保在进行任何应该使用$ http而不是使用$ .ajax

的ajax调用时

你可以在jquery代码中找到很多可以用ng-class指令替换的地方，比如你只是在添加＆amp;删除类，或基于任何条件显示一些元素，以便可以使用ng-class指令替换那种jquery代码

查找您只删除DOM或添加可以通过ng-if指令轻松替换的DOM的位置，或者只使用ng-show / ng-hide <可以完成show hide of element < / p>

也可以在UI中找到这样一个部分，在这个部分中你使用for循环创建相同的DOM，可以转换为angular native directive ng-repeat

如果您有任何需要显示和隐藏多个元素的情况，那么部分代码将使用ng-switch指令实现

（很抱歉在此处添加此内容，因为我没有足够的声誉对您的帖子发表评论）您好，我刚刚在那里阅读您的评论，因为您想在代码中使用jQuery视图。我的建议是使用Angular UI-bootstrap Modal（click here）。我在很多项目中都使用过Modal，效果很好！我希望这有帮助

如何在SPA中添加一些jquery？

1 个答案: