요소 내부에 각도 js 템플릿 문자열을 삽입합니다.

요소 내부에 각도 js 템플릿 문자열을 삽입합니다.

요소 내부에 angular js 템플릿 문자열을 넣으려고 합니다.또, 준거한 출력을 기대하고 있습니다.하지만 그럴 일은 없어

HTML

<div ng-controller="testController">
    <div ng-bind-html-unsafe="fruitsView"></div>
</div>

컨트롤러:

function filterController($scope){
    ...
    $scope.arr = ["APPLE", "BANANA"];
    $scope.fruitsView = '<div><p ng-repeat="each in arr">{{each}}</p></div>';
}

출력은 그냥{{each}}.

그럼 angular js 템플릿 문자열을 삽입하려면 어떻게 해야 하나요?$scope.fruitsView)을(를) 선택하시겠습니까?

나는 이것을 위해 바이올린을 만들었다.

이 경우 단순히 "HTML 삽입"이 아니라 컴파일해야 합니다.를 사용하여 DOM 노드를 생성할 수 있습니다.$compile서비스.

var tpl = $compile( '<div><p ng-repeat="each in arr">{{each}}</p></div>' )( scope );

당신이 볼 수 있듯이.$compile스코프 개체를 파라미터로 사용하는 함수를 반환하고, 이 함수에 따라 코드가 평가됩니다.결과 컨텐츠를 DOM 에 삽입할 수 있습니다.element.append(),예를들면.

중요사항:단, 어떤 경우에도 DOM 관련 코드는 컨트롤러에 속하지 않습니다.적절한 장소는 항상 지시사항이다.이 코드는 쉽게 디렉티브에 넣을 수 있는데 왜 HTML을 프로그래밍 방식으로 삽입하는지 궁금합니다.

좀 더 구체적인 답변을 드릴 수 있도록 조명을 좀 비춰주실 수 있나요?

갱신하다

데이터가 서비스에서 가져온다고 가정할 때:

.factory( 'myDataService', function () {
  return function () {
    // obviously would be $http
    return [ "Apple", "Banana", "Orange" ];
  };
});

그리고 당신의 템플릿은 서비스로부터 왔습니다.

.factory( 'myTplService', function () {
  return function () {
    // obviously would be $http
    return '<div><p ng-repeat="item in items">{{item}}</p></div>';
  };
});

그런 다음 제공된 템플릿을 읽고 컴파일한 후 디스플레이에 추가하는 간단한 지시문을 만듭니다.

.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'template', function ( tpl ) {
        if ( angular.isDefined( tpl ) ) {
          // compile the provided template against the current scope
          el = $compile( tpl )( scope );

          // stupid way of emptying the element
          element.html("");

          // add the template content
          element.append( el );
        }
      });
    }
  };
});

다음으로, 고객님의 견해:

<div ng-controller="MyCtrl">
   <button ng-click="showContent()">Show the Content</button>
   <div show-data template="{{template}}"></div>
</div>

컨트롤러에서는, 간단하게 접속할 수 있습니다.

.controller( 'MyCtrl', function ( $scope, myDataService, myTplService ) {
  $scope.showContent = function () {
    $scope.items = myDataService(); // <- should be communicated to directive better
    $scope.template = myTplService();
  };
});

그리고 이 모든 것이 함께 작동해야 합니다!

PS: 이 모든 것은 서버에서 템플릿을 가져오는 것을 전제로 하고 있습니다.그렇지 않은 경우 템플릿이 지시문에 있어야 합니다. 그러면 작업이 단순해집니다.

언급URL : https://stackoverflow.com/questions/14846836/insert-an-angular-js-template-string-inside-an-element