单击角度js中的链接加载html视图文件答案

【问题标题】：Load html view file on click of link in angular js单击角度js中的链接加载html视图文件
【发布时间】：2015-08-19 22:55:00
【问题描述】：

这是我的html代码

   <link rel="stylesheet" 
   href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <!-- load angular via CDN -->
  <script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
  <script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js ">
  </script>
 <script src="v2-app.js"></script>
  <script src="components/where-to-buy/whereToBuyController.js"></script>
 <script src="components/sku-listing/deviceController.js"></script>
 <script src="directives.js"></script> 
<nav class="tab-nav">
    <div class="tab-nav-inner">
        <div class="container-fluid" ng-controller="mainController">
            <div class="row">
                <ul class="nav nav-pills nav-justified th-menu">
                    <li role="presentation" ng-class="{active:isActive('/about')}"  ><a href="#/about" ng-click="scrollToSection('content-section')">Erafone offer details</a></li>
                    <li role="presentation" ng-class="{active:isActive('/form')}"><a href="#/form" ng-click="scrollToSection('content-section')">Form</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<!-- Tab panes -->
<div class="container-fluid">

    <ng-view>


    </ng-view>

我想使用 Angular js 在点击表单时加载 html 视图文件。这是我的js代码

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

 // ROUTE
 dgApp.config(function($routeProvider){
 $routeProvider
    .when('/about',{
        templateUrl: 'components/additional-info/v2-
     additionalInfoView.html',
        controller : 'mainController'
    })
    .when('/form',{

        templateUrl: 'components/form/v2-formView.html',
        controller : 'mainController'
    })
    .otherwise({ redirectTo: '/about' }) 
});
 dgApp.controller('mainController', ['$scope' , '$location', '$http', 
  '$filter', function ($scope, $location, $http, $filter) {

  $scope.scrollToSection = function(sectionID){

    $('html, body').animate({
        scrollTop: $("#"+sectionID).offset().top  - 63
    }, 800);
 }

 }]);

控制台有错误

ReferenceError: 角度未定义 v2-app.js:2:4

TypeError: dgApp is undefined directives.js:1:0

TypeError: $ 不是函数 index.html:143:5

所以我想在 ng-view 的同一页面上的单击表单链接上加载 html 视图文件。我在上面的代码中做错了什么？如果有人有任何想法，请指导我。

【问题讨论】：

尝试在函数scrollToSection 中使用$scope.$apply() 应用摘要循环，因为您在角度代码中调用jquery 函数
可能类似于$scope.scrollToSection = function(sectionID){ $('html, body').animate({ scrollTop: $("#"+sectionID).offset().top - 63 }, 800);$scope.$apply(); }
试试这个stackoverflow.com/a/17285334/2435473
我不想滚动..我想在点击同一页面上的链接时直接打开一个 html 文件。请看这个链接..我想要那种功能
tutorialspoint.com/angularjs/angularjs_views.htm

标签： javascript html angularjs

【解决方案1】：

您的错误堆栈跟踪清楚地表明您错过了添加 angular.js 和 jquery.js，尝试添加这些将解决您的问题

顺序是

angular.js
angular-route.js
jquery.js
v2-app.js 和其他 Angular 文件将在它之后加载。

编辑

要在点击时加载您的视图，您需要从您的 $routeProvider 中删除 .otherwise({ redirectTo: '/about' }) 查看更新的 plunkr

Demon Plunkr

【讨论】：