AngularJS 指令中属性 replace transclude的用法

	
some existing content

1. 当scope=true时

angular.module('scopes', [])
.controller('Ctrl', function($scope) {$scope.title = "hello";
})
.directive('myDir', function() {return {restrict: 'E',replace: true,template: '{{title}}'};
});

运行后的DOM为：

2. 当scope=false时

angular.module('scopes', [])
.controller('Ctrl', function($scope) {$scope.title = "hello";
})
.directive('myDir', function() {return {restrict: 'E',replace: false,template: '{{title}}'};
});

运行后的DOM为：

3. 若想保留原有元素的的子元素，需要使用transclude属性

angular.module('scopes', [])
.controller('Ctrl', function($scope) {$scope.title = "hello";
})
.directive('myDir', function() {return {restrict: 'E',replace: false,transclude: true,template: '{{title}}'};
});

运行后的DOM为：

指令的子元素

some existing content

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！