n-include Angular JS

Question

我有一个主 index.html 文件，在该文件中，我想使用 ng-include 包含另一个 .html。这是我的代码：

（我只会上传相关代码部分，如果需要整个代码，我可以编辑）

index.html

<!DOCTYPE html>
<html>

<head>
<!-- include CAPH 3.0.1 default package -->
<link href="lib/caph/3.0.1/caph.min.css" rel="stylesheet" type="text/stylesheet">
<link href="styles/main.css" rel="stylesheet" type="text/stylesheet">
<!-- include jQuery file (you can use AngularJS & jQuery in your environment) -->
<script src="lib/caph/3.0.1/bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="lib/caph/3.0.1/bower_components/angular/angular.min.js" type="text/javascript"></script>
<!-- include the CAPH Package for AngularJS -->
<script src="lib/caph/3.0.1/caph-angular.min.js" type="text/javascript"></script>
</head>
<script>
var myApp = angular.module('myApp', ['caph.focus', 'caph.ui']);
myApp.factory('sharedProperties', function(){
  var DEPTH={
    MAIN_MENU: 1,
    RESTAURANT: 2,
    MOVIES: 3,
    MOVIE_SELECT: 4
  };
  var currentDepth;
  var focus = function($event) {
    $($event.currentTarget).css({
      border: '10px solid red'
   });
  }

  var blur = function($event){
    $($event.currentTarget).css({
      border : '3px solid transparent'
   });
  }

  var select = function($event){
    if($event.target.id === "roomservice"){
      currentDepth = DEPTH.RESTAURANT;
    } else if($event.target.id === "vod"){
      currentDepth = DEPTH.MOVIES;
    } else if($event.target.id === "back"){
      currentDepth = DEPTH.MAIN_MENU;
    } else if($event.target.id === "fantasy"){
      currentDepth = DEPTH.MOVIE_SELECT;
    }
    return currentDepth;
  }

  return{
    focus: focus,
    blur: blur,
    select: select,
    currentDepth: currentDepth,
    depth: DEPTH
  }
});

    myApp.controller('myController', function($scope, sharedProperties) {
    $scope.currentDepth = sharedProperties.depth.MAIN_MENU;
    $scope.focus = function($event){
      sharedProperties.focus($event);
    }
    $scope.blur = function($event){
      sharedProperties.blur($event);
    }
    $scope.select = function($event){
      $scope.currentDepth = sharedProperties.select($event);
      console.log($scope.currentDepth);
    }
    $scope.items = [];
    for (var i = 0; i < 20; i++) {
      $scope.items.push({
        text: i+1,
        image: 'image/moviepics/' + (i%2 + 1) + '.jpg'
      });
    }
</script>

<body ng-app="myApp">
<div ng-controller="myController">
    <div ng-if="currentDepth === 4">
      <h1>Pick a movie</h1>
      <div ng-include="'new.html'">
      </div>
    </div>
  </div>
</div>
</body>

</html>

这是new.html:

<style>
  .list{
    position: absolute;
    width: 600px;
    height: 135px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid transparent;
 }

  .item{
    background: green;
    box-sizing: border-box;
    border: 3px solid white;
    width: 200px;
    height: 135px;
 }
</style>
<caph-list container-class="list" on-focus-item-view="onFocusItemView($context)"  items="item in items">
   <div class="item" focusable data-focusable-initial-focus="{{$index===0?true:false}}">
     <div class="test" style="width:100%; height:100%; background-size:100% 100%; background: url({{item.image || ''}})"><a href="#"></a></div>
  </div>
</caph-list>

我收到一个 ng-areq 错误，并多次加载 angular 警告。对于完整错误，please see the attached picture. 我希望我的问题和代码很清楚任何和所有的帮助表示赞赏。谢谢。

Answer 1

当您包含模板时，页面相关部分的 HTML 需要出现在其中。在您的 new.html 中，您包含了 HTML 标签中不必要的所有内容。删除那些，只包含必要的 div 和其他元素。

n-include Angular JS

ng-include Angular JS

angularjs

angularjs-ng-include