zoukankan      html  css  js  c++  java
  • angularjs1- ng-include

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../angular.min.js"></script>
        <style>
            .red{ background:red;}
            .yellow{ background:yellow;}
        </style>
    </head>
    <body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <div ng-bind="text"></div>
             <div ng-include="url"></div>
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('firstController',['$scope','$interval',function($scope,$interval){
            //$scope.text = '<h1>hello</h1>';
            $scope.text = 'hello';
            $scope.url = 'test.html';
        }]);
    </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../angular.min.js"></script>
        <style>
            .red{ background:red;}
            .yellow{ background:yellow;}
        </style>
    </head>
    <body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <div ng-bind="text"></div>
              <div ng-include="url"></div>
              <div ng-include="tpl"></div>
             <div ng-include src="tpl2"></div>
        </div>
        //以script方式引入模版
        <script type="text/ng-template" id="tpl.html">
            Content of the template.111111111111
        </script>
        <script type="text/ng-template" id="tpl2.html">
            Content of the template.2222222222
        </script>
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('firstController',['$scope','$interval',function($scope,$interval){
            //$scope.text = '<h1>hello</h1>';
            $scope.text = 'hello';
    
            $scope.url = 'test.html';
    
            $scope.tpl = 'tpl.html';
            $scope.tpl2 = 'tpl2.html';
    
        }]);
    </script>
    
    </body>
    </html>
  • 相关阅读:
    写在连载之前——DIY微型操作系统篇
    footer始终在页面最底部的方法(问题待检验)
    各种二级菜单代码
    复选框已经有checked,但是页面没有选中效果(解决)
    px em rem 的区别
    marquee标签详解
    Docker:正常运行的容器突然端口不通一般检查方法
    linux中 vm.overcommit_memory 的含义
    redis6 redis-cli cluster的使用总结
    利用Java反射机制优化简单工厂设计模式
  • 原文地址:https://www.cnblogs.com/yaowen/p/7225580.html
Copyright © 2011-2022 走看看