Question

实际上我想制作一些html块并通过ngInclude加载它们，当我通过控制器调用页面时，ngView显示包含我的html块的页面例如像这个脚手架

的根
index.html -----＆gt;包含ngView用于加载页面
app.js
的 -------根/视图
Dashboard.html ----＆gt;包含仪表板的html块
的 --------------根/视图/控制板
dashboard-profile.html ----＆gt;仪表板的html块 ... ...

我尝试了下面的代码，但它不起作用

app.js

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

demoApp.config(function ($routeProvider){
    $routeProvider
    .when('/dashboard',
          {
              controller: 'SimpleController1',
              templateUrl: 'views/dashboard.html'
          })
    .when('/page',{
        controller: 'SimpleController2',
        templateUrl: 'Sources/views/page2.html'
    })
    .otherwise({ redirectTo: '/dashboard' });
});

demoApp.controller('myCtrl', function($scope) {
    $scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});

的index.html

<body ng-app="sampleApp" >

<div ng-view ></div>

    <!-- compiled and minified Bootstrap JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script type="text/javascript" src="Sources/app2.js"></script>

</body>

dashboard.html

<div ng-include='dashboardprofile' ng-controller="myCtrl"></div>

dashboard-profile.html

  Some divs and text

感谢您的帮助

Answer 1

试试这个..

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

 demoApp.config(function ($routeProvider){
  $routeProvider
.when('/dashboard',
      {
          controller: 'myCtrl',
          templateUrl: 'views/dashboard.html'
      })
.when('/page',{
    controller: 'SimpleController2',
    templateUrl: 'Sources/views/page2.html'
})
.otherwise({ redirectTo: '/dashboard' });
});

demoApp.controller('myCtrl', function($scope) {
$scope.dashboardprofile = 'views/dashboard/dashboard-profile.html';
});

加载带有ng的html块当使用ng View加载另一个页面时包含

1 个答案: