如何将angularjs指令innerText传递给模板？

Question

如何将angularjs指令innerText传递给模板？

截图：

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>