AngularJS how to create a directive with HTML content?

Question

I am trying to create a directive that will load a page and make it available in the service and as a scope, and will have content inside the directive element.

This should be pretty self-evident (simplified), what I'm trying to do:

<cms-page page-id="829">
    <h1>Testing</h1>
    <ul ui-sortable ng-model="pageData.sections.main">
        <li ng-repeat="element in pageData.CmsPage.sections.main track by $index">
            <div ng-include="'/templates/cms/elements/' + element.element_type + '.html'"></div>
        </li>
    </ul>
    <pre>{{pageData | json}}</pre>
</cms-page>

The problem with this is that it does not show {{pageData}}. How to create a directive that will show existing markup and analyze existing markup and child directives?

Here is my directive:

angular.module(cms).directive('cmsPage', ['CmsPage', 'CmsPagesService', function(CmsPage, CmsPagesService) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-transclude></div>',
        scope: {
            pageId: '@pageId'
        },
        controller: function($scope) {
            $scope.pageData = {};
            CmsPagesService.get($scope.pageId).then(function(result) {
                if (result.status == 'success') {
                    $scope.pageData = result.data;
                } else {
                    throw 'Page failed to load.';
                }
            });
            $scope.$watch('pageData', function() {
                CmsPage.setPage($scope.pageData);
            });
        }
    };
}]);

Answer 1

, . , html <cms-page> cms-page - , , , - . , .

, - , pageData, , pageData - undefined ( , html). , , :

, , , . , html :

HTML:

<cms-page page-id="829"></cms-page>

template: // the original html to be transcluded

:

• , .
• pageData
• ; , , pageData , html

, :

HTML:

<cms-page page-id="829" page-template="templateA"></cms-page>

template: function(tElem, tAttrs) {
  if(tAttrs.pageTemplate) {
    return '<div>...</div>';
  }  // and so on...
}

- , , angular , , , , . transclude :

transclude: true,
template: '<div></div>',
scope: {
  pageId: '@'
}
link: function(scope, elem, attrs, ctrl, transclude) {
  transclude(scope, function(clone) {
    // transcluded html is now bound to the isolated scope of the directive
    // therein making pageData accessible "externally"
    elem.append(clone);
  });
}

Answer 2

AngularJS $, :

- DOM DOM DOM, AngularJS , .

, , . pageData , pageData.

DEMO

  .directive('cmsPage', ['CmsPage', 'CmsPagesService', function(CmsPage, CmsPagesService) {
    return {
          restrict: 'E',
          transclude: true,
          template: '<div ng-transclude></div>',
          scope: {
              pageId: '@pageId',
              pageData: '='
          },
          controller: function($scope) {
              $scope.pageData = {};
              CmsPagesService.get($scope.pageId).then(function(result) {
                $scope.pageData = result.data;
              });
              $scope.$watch('pageData', function() {
                  CmsPage.setPage($scope.pageData);
              });
          }
      };
  }]);