2013-01-01 2 views
3

안녕하세요 저는 각도를 배우기 시작했으며 ng-repeat와 ng-repeat의 조합을 사용하면 문제가 발생합니다. 내가 무엇을해도 템플릿을 렌더링 할 수 없습니다. 워크 스페이스 목록을 생성하는 간단한 컨트롤러가 있고 각 작업 공간에는 TemplateUrl 속성이 있습니다.AngularJS, ng-repeat with ng-includes 렌더링하지 않음

원시 텍스트 {{workspace.TemplateUrl}}을 렌더링하고이를 ng-include에 직접 저장하면 아무 문제가 없기 때문에 값이 정확하다는 것을 알고 있습니다. 그것은 단지 컨트롤러에서 오는 때 작동하지 않는 것. 템플릿 경로를 따옴표로 묶으려고했지만 아무런 차이가 없습니다.

$scope.Workspaces.push(new Workspace("'/app/templates/Template1.html'", "Workspace 1")); 

나는 그것을 실행

나는 템플릿을 끌어 할 요청을 볼 수 없습니다입니다. 누군가가 내게 약간의 열매를 맺는 데 도움이 될 수 있습니까?

var Workspace = (function() { 
     function Workspace(templateUrl, name) { 
      this.TemplateUrl = templateUrl; 
      this.Name = name; 
     } 
     return Workspace; 
    })(); 
    function HostController($scope) { 
     $scope.Workspaces = new Array(); 
     $scope.Workspaces.push(new Workspace("/app/templates/Template1.html", "Workspace 1")); 
     $scope.Workspaces.push(new Workspace("/app/templates/Template2.html", "Workspace 2")); 
     $scope.Workspaces.push(new Workspace("/app/templates/Template1.html", "Workspace 3")); 
     $scope.Workspaces.push(new Workspace("/app/templates/Template2.html", "Workspace 4")); 
     $scope.Workspaces.push(new Workspace("/app/templates/Template1.html", "Workspace 5")); 
    } 

답변

8

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <title>Workspaces</title> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
    <script src="app/libraries/jquery.js"></script> 
    <script src="app/libraries/bootstrap.min.js"></script> 
    <script src="app/libraries/angular.js"></script> 
    <script src="app/app.js"></script> 
</head> 

<body ng-controller="HostController"> 
    <div> 
     <ul class="unstyled"> 
      <li ng-repeat="workspace in Workspaces"> 
       <p>{{workspace.TemplateUrl}}</p> 
       <hr /> 
       <div ng-include="{{workspace.TemplateUrl}}"></div> 
      </li> 
     </ul> 
    </div> 

</body> 
</html> 

컨트롤러 코드 나는 그것이 NG 문이기 때문에

<div ng-include="{{workspace.TemplateUrl}}"></div> 

<div ng-include="workspace.TemplateUrl"></div> 

을해야합니다 귀하의 코드 인용.

+0

아! 환상적 !! 방금 바인딩 된 모든 값을 바인딩 식과 같은 형식으로 가정했습니다. 내가 앞으로 나아갈 것을 기억하는 하나! :-) – user231300

+0

{{}}을 (를) 필요가 없도록 직접 평가하는 문장입니다. 또한 ng-include = "/ templates/my-temp.html"같은 문자열을 ng-include에 넣지 마십시오. ng-include = " '/ templates/my-temp.html과 같이 인용해야합니다. ' ", 마치 자바 스크립트입니다. – mpm