angularJs之template指令

时间:2023-03-08 16:46:47
  • template:

    如果我们只需要在ng-view 中插入简单的HTML 内容,则使用该参数:

    .when('/computers',{template:'这是电脑分类页面'})
  • templateUrl:

    如果我们只需要在ng-view 中插入HTML 模板文件,则使用该参数:

    $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
    });

例 template指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular. min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive><!-- E元素-->
<div class="runoob- directive"></div><!-- C样式-->
<div runoob-directive></div><!-- A属性-->
<!-- directive: runoob-directive --><!- - M注释-->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "ACEM",//A属性C样式E元素M注释
replace : true,
template : "<h1>自定义指令222!</h1>"=======页面中显示的是这里的内容,包括标签,如果这里的标签与内容越来越多,会难以维护。
};
});
</script>
</body>
</html>

====以上指令内容是被标签包围起来的,如果标签越来越多,维护不方便,书写也困难,解决以上问题,将template的内容写在一个页面上,这里的内容不再是内容,而是一个页面的地址。

也就相当于路由的页面跳转的这个功能了

angularJs之template指令