ng-includes Angular JS

주 index.html 파일이 있는데 해당 파일에 ng-include를 사용하여 .html을 추가하고 싶습니다. 이건 내 코드입니다 :ng-includes Angular JS

(I 만, 관련 코드 섹션을 업로드 전체 코드가 필요한 경우, 나는 그것을 편집 할 수 있습니다)

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>

WARNING WARNING이 두 번 이상로드 된 상태에서 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에서 컨트롤러를 삭제하고 index.html @Venkat 안에 $ scope.items 및 for 루프를 추가했음을 참고하십시오. – user3583252

네, 이렇게해야합니다. 오류가 계속 발생하면? – Venkat

예, 불행히도 여전히 동일한 오류가 발생했습니다 – user3583252

ng-includes Angular JS

답변

관련 문제