angularjs에서 동적 값을 사용하여 템플릿 페이지를 동적으로 추가하는 방법

실제로 저는 angularJS에 새로 입문 했으므로 여러분에게 괴상한 것처럼 보이는 기본적인 질문을하고 있습니다. 나는 jQuery를 익숙하게하고 있는데, 문서가 매우 제한되어 있기 때문에 혼동이 생기는 이유가 많습니다. 내가 클릭하고 (ID = D) 섹션angularjs에서 동적 값을 사용하여 템플릿 페이지를 동적으로 추가하는 방법

업데이트는, 아약스를 호출 값을 얻을 DIV에 (template.html 말) 템플릿에 렌더링한다) (showdiv를 호출 할 때마다

<!Doctype> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Example - example-example12-production</title> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
    </head> 
    <body ng-app="docsTemplateUrlDirective"> 
     <div ng-controller="Controller as c"> 
     <button ng-click="c.showdiv()">show</button > 
     <div id="d"></div> 
    </div> 
<script> 

angular.module('docsTemplateUrlDirective', []) 
    .controller('Controller', ['$scope', function($scope) { 
this.showdiv=function(){ 

    //do the ajax call and get the value from server 
    //pick the required template 
    //render the returned value on picked template 

} 
}]); 
</script> 
    </body> 
    </html>

내가 원하는 : 1. 우리는 두 개의 button.if button1을 클릭 한 다음 button2의 template2.html에 대해 template1.html anf를 선택합니다. { "anyname 다음", "나이": "이름", "25"}로

2.ajax 반환 template1.html에서 그 등 다른 템플릿과 단추 2 다른 값에 대한

<div> 
{{Name}},{{Age}} 
</div>

으로 결합했다 스타일.

출처

2016-09-13 Joe

그래서 템플릿과 콘텐츠가 모두 동적이어야합니까? 또는 템플릿은 항상 template.html입니까? –

또한 컨트롤러 정의에 닫는 대괄호가 없습니다. –

"필요한 템플릿 선택"은 서버에서 ID 또는 다른 것을 보내고 있음을 의미합니까? 서버는 무엇을 반환합니까? Btw는 ajax 통화를 위해 $ http를 체크 아웃합니다. 그리고 아마도 "this"를 "$ scope"로 바꾸고 싶을 것입니다. – Tom

업데이트합니다 DIV "D"는 대답 :

<div id="d" ng-include="chosenTemplate"></div>

업데이트 버튼 :주의 또한

this.showdiv = function(theTemplate) { 

    $scope.chosenTemplate = theTemplate; 

    // do AJAX call using $http.get 
    $scope.Name = "John Smith"; 
    $scope.Age = 25; 
}

을

이

<button ng-click="c.showdiv('template1.html')">show 1</button > 
<button ng-click="c.showdiv('template2.html')">show 2</button >

그런 다음 다음과 같은 것을 추가

언급 한 바와 같이 abov e 범위에 showdiv 기능을 추가 할 수 있으므로 "c"접두어를 붙일 필요가 없습니다. 귀하의 html로.

컨트롤러 정의 끝 부분에 앞에서 언급 한 것처럼 닫는 대괄호가 없습니다.]

출처

2016-09-13 16:48:15

감사합니다. 잘 작동했습니다. 나는 이것이 서버 측의 가치를 얻고 그것을 템플릿으로 렌더링하는 좋은 방법이되기를 바란다. – Joe

angularjs에서 동적 값을 사용하여 템플릿 페이지를 동적으로 추가하는 방법

답변

관련 문제