как передать angularjs директиву innerText в шаблон?

Question

как передать директиву angularjs innerText в шаблон?

screenshoot:

HTML-код здесь:

<div class="carBox">
  <img ng-src="img/{{Id}}.png" width="128" height="128" />
  <br />
  <br />
  <h4>{{Name}}</h4>
  <div><small>{{Country}}</small></div>

</div>

<carbox ng-repeat="car in cars track by car.Id" ng-model="car"><a href="#">Go to Web Site</a></carbox>

Код Javascript здесь:

        app.directive('carbox', function ($log) {
        return {
            restrict: 'EA',
            scope: {
                model: '=ngModel'
            },
            templateUrl: 'carBox.html',
            link: function (scope, element, attr, ngModel) {

                $log.debug(scope.model);
                scope.Id = scope.model.Id;
                scope.Name = scope.model.Name;
                scope.Country = scope.model.Country;
            }
        };
    });

Answer 1

Если вы хотите включить содержимое в элемент директивы, вы должны установить для параметра transclude значение true

app.directive('carbox', function ($log) {
    return {
        restrict: 'EA',
        tranclude: true,
        scope: {
            model: '=ngModel'
        },
        templateUrl: 'carBox.html',
        link: function (scope, element, attr, ngModel) {

            $log.debug(scope.model);
            scope.Id = scope.model.Id;
            scope.Name = scope.model.Name;
            scope.Country = scope.model.Country;
        }
    };
});

В шаблон вашей директивы добавьте директиву ng-transclude.

<div class="carBox">
   <img ng-src="img/{{Id}}.png" width="128" height="128" />
   <br />
   <br />
   <h4>{{Name}}</h4>
   <div><small>{{Country}}</small></div>
   <ng-transclude></ng-transclude>
</div>