zoukankan      html  css  js  c++  java
  • Angular

    $anchorScroll

    根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素。

    监听$location.hash()并且滚动到url指定的锚点的地方。可以通过$anchorScrollProvider.disableAutoScrolling()禁用。

    依赖:$window   $location   $rootScope

    使用:$anchorScroll();

    使用代码:

      #id {
          height:500px;
      }
      #bottom {
          margin-top:1500px;
      }
      <div ng-app="Demo">
          <div ng-controller="testCtrl as ctrl">
            <div id="top" ng-click="ctrl.gotoBottom()">跳到底部</div>
            <div id="bottom" ng-click="ctrl.gotoTop()">跳到顶部</div>
          </div>
      </div>
    复制代码
      (function () {
        angular.module("Demo", [])
        .controller("testCtrl",["$location", "$anchorScroll",testCtrl]);
        function testCtrl($location,$anchorScroll){
          var vm = this;
          vm.gotoTop = function () {
            $location.hash("top");
            $anchorScroll();
          };
          vm.gotoBottom = function () {
            $location.hash("bottom");
            $anchorScroll();
          };
        };
      }());
    复制代码

    $controller

    $controller负责实例化控制器。

    这只是个简单的$injector调用,但为了以前版本的这个服务能被覆盖而被提取进一个服务。

    依赖:$injector

    使用:$controller(constructor,locals);

    constructor:如果调用了一个函数,那么这个函数被认为是控制器构造函数。否则,它被认为是一个使用以下步骤检索控制器的构造函数的字符串:

    1.检查控制器是否在$controllerProvider注册并命名。

    2. 检查当前作用域上的字符串是否返回一个构造函数

    3.在全局window对象上检查构造器。

    locals:在本地注册controller。

    使用代码:

    复制代码
      (function () {
        angular.module("Demo", [])
        .controller("demoCtrl",["$scope",demoCtrl])
        .controller("testCtrl",["$controller","$scope",testCtrl]);
        function demoCtrl($scope){
            var vm = this;
            $scope.print = function () {
                console.log("print");
            };
            vm.prt = function () {
                $scope.print();
            };
        };
        function testCtrl($controller,$scope){
            var ctrl = $controller("demoCtrl",{$scope:$scope});
            ctrl.prt(); // print
        };
      }());
    复制代码

     

    $document

    一个jQuery或jqlite包装了的浏览器window.document对象。

    依赖:$window

    使用代码:

    复制代码
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <script src='angular.js'></script>
        <title>title-$document</title>
    </head>
    <body>
      <div ng-app="Demo" ng-controller="testCtrl as ctrl"></div>
      <script>
      (function () {
        angular.module("Demo", [])
        .controller("testCtrl",["$document",testCtrl]);
        function testCtrl($document){
            var $title = $document[0].title;//title-$document
            var title = angular.element(window.document)[0].title;//title-$document
            var v = $document[0] === window.document;//true
        };
      }());
      </script>
    </body>
    </html>
  • 相关阅读:
    分区助手怎么调整磁盘分区的大小
    3dsmax2014的下载、安装与注册激活教程详解
    U深度U盘启动盘制作工具怎么用?U深度U盘启动盘制作工具使用教学
    CAD出现向程序发送命令时出现问题提示解决方法分享
    TeamViewer——可以实现在手机上随时远程控制你的电脑
    CPU-Z五大主要功能及使用方法初步了解
    vs中更改项目名称注意事项
    Oracle 存储过程例子返回记录集
    oracle 调用包体的函数并返回return值
    oracle 中更新update不成功的原因
  • 原文地址:https://www.cnblogs.com/koleyang/p/5053162.html
Copyright © 2011-2022 走看看