zoukankan      html  css  js  c++  java
  • angularjs 服务供应商

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #parent div{ 300px; height:500px; border:1px #000 solid; margin:20px;}
    #parent ul{ 200px; position:fixed; top:0; right:0;}
    </style>
    <script src="angular.min.js"></script>
    <script>
    //供应商:为对应的服务初始化相关配置
    
    
    var m1 = angular.module('myApp',[]);
    //interpolateProvider是interpolate(插值)的服务供应商,scopeProvider是scope的服务供应商。供应商的操作要在config里面写。
    m1.config(['$interpolateProvider',function($interpolateProvider){    
        //不用{{}}用@@@@。
        $interpolateProvider.startSymbol('@@');
        $interpolateProvider.endSymbol('@@');    
    }]);
    
    m1.controller('Aaa',['$scope','$interpolate',function($scope,$interpolate){    
        $scope.$watch('body',function(newBody){        
            if(newBody){
                var temp = $interpolate(newBody);
                $scope.showText = temp({ name : $scope.name });            
            }        
        });    
    }]);
    
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
        <input type="text" ng-model="name">
        <textarea ng-model="body">
        </textarea>
        <p>@@showText@@</p>
    </div>
    </body>
    </html>
    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #parent div{ 300px; height:500px; border:1px #000 solid; margin:20px;}
    #parent ul{ 200px; position:fixed; top:0; right:0;}
    </style>
    <script src="angular.min.js"></script>
    <script>
    
    var m1 = angular.module('myApp',[]);
    //$logProvider是$log服务的供应商。
    m1.config(['$interpolateProvider','$logProvider',function($interpolateProvider,$logProvider){
        $logProvider.debugEnabled(false);//禁用debug,则下面就不能打印hello.
    }]);
    
    m1.controller('Aaa',['$scope','$log',function($scope,$log){
        $log.debug('hello');
    }]);
    
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
       
    </div>
    </body>
    </html>
    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #parent div{ 300px; height:500px; border:1px #000 solid; margin:20px;}
    #parent ul{ 200px; position:fixed; top:0; right:0;}
    </style>
    <script src="angular.min.js"></script>
    <script>
    
    var m1 = angular.module('myApp',[]);
    
    //$anchorScrollProvider是anchorScroll的服务供应商,
    m1.config(['$anchorScrollProvider',function($anchorScrollProvider){
        $anchorScrollProvider.disableAutoScrolling();//禁止锚点跳转。
    }]);
    
    m1.controller('Aaa',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
        $scope.change = function(id){    
            $location.hash(id);
            $anchorScroll();
        };
    }]);
    
    </script>
    </head>
    <body>
    <div id="parent" ng-controller="Aaa">
        <ul>
            <li ng-repeat="id in [1,2,3,4,5]" ng-click="change('div'+id)">{{id}}aaaaaaaaaa</li>
        </ul>
        <div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
    </div>
    </body>
    </html>
  • 相关阅读:
    OpenStack入门篇(八)之镜像服务Glance
    OpenStack入门篇(七)之认证服务Keystone
    OpenStack入门篇(六)之OpenStack环境准备
    OpenStack入门篇(五)之KVM性能优化及IO缓存介绍
    OpenStack入门篇(四)之KVM虚拟机介绍和管理
    OpenStack入门篇(三)之KVM介绍及安装
    OpenStack入门篇(二)之OpenStack架构
    OpenStack入门篇(一)之云计算的概念
    Linux系统运维基础管理命令总结
    TCP三次握手和四次挥手以及11种状态
  • 原文地址:https://www.cnblogs.com/yaowen/p/5745917.html
Copyright © 2011-2022 走看看