AngularJS路线与jQuery显示/隐藏

我刚刚开始使用AngularJS（来自jQuery），它似乎值得替换我的大部分jQuery。AngularJS路线与jQuery显示/隐藏

我决定开始的最简单的地方就是我所有的简单的显示/隐藏选项卡式内容。目前，我在加载的页面中拥有所有适用的html。但是，似乎我最好使用Angular路线加载这些标签部分的全部内容。我在这个假设中纠正了吗？或者我应该使用一些混合方法（这些部分中的内容是动态的）？

无论如何，有了Angular的解决方案，我似乎无法让脚本为路由工作。我处于一个非常新的领域，对于我出错的地方我一无所知。任何帮助格雷亚

我目前HTML（简体）：

<!DOCTYPE html> 

<html data-ng-app='mainApp'> 

<head> 

    <script src='js/jquery.min.js'></script> 
    <script src='js/angular.min.js'></script> 

</head> 

<body> 


<div class='toggleButtons'> 

<a href='#/info'> 
<div></div> 
</a> 

<a href='#/comment'> 
<div></div> 
</a> 

<a href='#/feedback'> 
<div></div> 
</a> 

</div> 


<div class='container'> 

<div data-ng-view=''></div> 

</div> 

<script src='app/main.app.js'></script> 

</body> 

</html>

角：

/// <reference path="../js/angular.min.js" /> 

var mainApp = angular.module('mainApp', []); 

mainApp.config(function ($routeProvider) { 

    $routeProvider 

     .when('/info', 
      { 
       controller: 'mainInfoController', 
       templateUrl: '/app/partials/info.html' 
      }) 

     .when('/comment', 
      { 
       controller: 'mainCommentController', 
       templateUrl: '/app/partials/comment.html' 
      }) 

     .when('/feedback', 
      { 
       controller: 'mainFeedbackController', 
       templateUrl: '/app/partials/feedback.html' 
      }) 

     .otherwise({ redirectTo: '/app/partials/info.html' }); 


});

只是要注意：上面的控制器是只是占位符真的。我还没有创建它们。但是，我不在乎现在是否工作。我只关心让局部视图路线出现。他们不是。点击链接可以正确显示page.html＃/ info（或评论或反馈等）。但没有任何反应。

而且文件路径如下：

主文件夹= HTML
- JS =脚本
- 应用程式=角文件（app.js /模块这里文件）
  - 视图
  - 偏色
  - 控制器
  - 服务

我在做什么错？

来源

2013-04-30 jstacks

是不是你的意思是你没有在你的代码中创建控制器 – 2013-04-30 04:39:22

它可以工作，如果你将部分放在与主html相同的水平。 – 2013-04-30 04:49:35

实际上它也适用于诸如app/partials/info.html之类的路径 – 2013-04-30 05:00:35

<!DOCTYPE html> 
<html ng-app='mainApp'> 

    <head> 
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'></script> 
     <script> 
      var mainApp = angular.module('mainApp', []); 

      mainApp.config(function($routeProvider) { 

       $routeProvider 

       .when('/info', { 
        controller: 'mainInfoController', 
        templateUrl: 'app/partials/info.html' 
       }) 

        .when('/comment', { 
        controller: 'mainCommentController', 
        templateUrl: 'app/partials/comment.html' 
       }) 

        .when('/feedback', { 
        controller: 'mainFeedbackController', 
        templateUrl: 'app/partials/feedback.html' 
       }) 

        .otherwise({ 
        redirectTo: '/info' 
       }); 

       function mainInfoController($scope) {} 

       function mainCommentController($scope) {} 

       function mainFeedbackController($scope) {} 
      }); 
     </script> 
    </head> 

    <body> 
     <div class='toggleButtons'> 
<a href='#/info'> 
<div>Info</div> 
</a> 

<a href='#/comment'> 
<div>Comment</div> 
</a> 

<a href='#/feedback'> 
<div>Feedback</div> 
</a> 
     </div> 
     <div ng-view></div> 
    </body> 
</html>

来源

2013-04-30 04:56:27

基本上，您需要对其进行更改的唯一一件事是您的代码是：从模板url中删除前导前锋。在这个阶段，控制器不是必需的。 – 2013-04-30 05:34:05

AngularJS路线与jQuery显示/隐藏

回答

相关问题