Question

在我掌握AngularJS的过程中，我有以下几点：

HTML：

<!DOCTYPE html>
<html ng-app='MyApp'>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>AngularJS - Sandbox</title>
</head>
<body>
  <div ng-controller="AppController">
    <my-border>Test text</my-border>    
  </div>
</body>
</html>

CSS：

.myBorder 
{
  color: red;
  border-style: solid;  
  border-width: 5px;
}

Javscript：

var myApp = angular.module('MyApp', []);

myApp.controller('AppController', function($scope) {

});

myApp.directive('myBorder', function() {
  return {
    restrict: 'E',
    template: '<div class="myBorder"></div>'
  };
});

为什么my-border中的文本没有插入到我的指令中，我该怎么办呢？ JSBin链接：http://jsbin.com/uFISoGUL/2/

Answer 1

您需要使用transclude选项：

myApp.directive('myBorder', function() {
  return {
    restrict: 'E',
    template: '<div class="myBorder" ng-transclude></div>',
    transclude: true
  };
});

http://jsbin.com/oDOQaXe/1

简单的指令包装元素不复制内容

1 个答案: