ng-include Angular JS

У меня есть основной файл index.html, и в этом файле я хочу включить другой .html, используя ng-include. Это мой код: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>

Я получаю ошибку нг-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

ответ

Смежные вопросы