• angularJs之template指令


    • 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的内容写在一个页面上,这里的内容不再是内容,而是一个页面的地址。

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

  • 相关阅读:
    C#脚本引擎 CS-Script 之(一)——初识
    系分过了,mark一下,就从这里开始吧
    Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目
    Android--多选自动搜索提示
    Android--自动搜索提示
    Android--图片集
    Android--下拉框
    SQL Server 收缩日志
    Android--按钮点击事件
    Android--TextView 文字显示和修改
  • 原文地址:https://www.cnblogs.com/songyunxinQQ529616136/p/6214140.html
Copyright © 2020-2023  润新知