ng-include Angular JS

我有一个主要的index.html文件，并且在那个文件中，我想使用ng-include来包含另一个.html文件。这是我的代码：ng-include Angular JS

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

的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>

这是新的。 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错误，带有多次角加载警告。对于完整的错误，please see the attached picture. 我希望我的问题和代码是明确的任何和所有帮助表示赞赏。谢谢。

来源

2016-06-12 user3583252

当您包含模板时，该页面的相关部分的HTML需要存在于其中。在你的new.html中，你已经包含了一些不必要的HTML标签。删除那些只有必要的div和其他元素。

来源

2016-06-12 11:04:36 Venkat

谢谢你的回复..我改变了new.html以适合你所说的。这是你的意思吗？请注意，我删除了new.html中的控制器，因为只需要一个控制器，并且我添加了$ scope.items和for循环index.html @Venkat – user3583252

是的，这是它的外观。你仍然收到错误之后？ – Venkat

是的，不幸的是，我仍然得到相同的错误 – user3583252

ng-include Angular JS

回答

相关问题