AngularJs $anchorScroll、$controller、$document

時間 2019-11-30

標籤 angularjs anchorscroll controller document 欄目 AngularJS 简体版

原文原文鏈接

$anchorScrollhtml

根據HTML5的規則，當調用這個函數時，它檢查當前的url的hash值而且滾動到相應的元素。瀏覽器

監聽$location.hash()而且滾動到url指定的錨點的地方。能夠經過$anchorScrollProvider.disableAutoScrolling()禁用。app

依賴：$window $location $rootScopeide

使用：$anchorScroll();函數

使用代碼：this

  #id {height:500px;}
  #bottom {margin-top:1500px;}

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <div id="top" ng-click="ctrl.gotoBottom()">跳到底部</div>
      <div id="bottom" ng-click="ctrl.gotoTop()">跳到頂部</div>
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$location", "$anchorScroll",testCtrl]);
    function testCtrl($location,$anchorScroll){
      this.gotoTop = function () {
        $location.hash("top");
        $anchorScroll();
      };
      this.gotoBottom = function () {
        $location.hash("bottom");
        $anchorScroll();
      };
    };
  }());

$controllerurl

$controller負責實例化控制器。spa

這只是個簡單的$injector調用，但爲了之前版本的這個服務能被覆蓋而被提取進一個服務。code

依賴：$injectorhtm

使用：$controller(constructor,locals);

constructor：若是調用了一個函數，那麼這個函數被認爲是控制器構造函數。不然，它被認爲是一個使用如下步驟檢索控制器的構造函數的字符串：

1.檢查控制器是否在$controllerProvider註冊並命名。

2. 檢查當前做用域上的字符串是否返回一個構造函數

3.在全局window對象上檢查構造器。

locals：Object，將須要調用的控制器註冊到當前控制器。

使用代碼：

  (function () {
    angular.module("Demo", [])
    .controller("demoCtrl",["$scope",demoCtrl])
    .controller("testCtrl",["$controller","$scope",testCtrl]);
    function demoCtrl($scope){
        $scope.print = function () {
            console.log("print");
        };
        this.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>

這兩天被$animate和$interpolate還有$http給折騰的心累啊，有一小部分代碼還沒測出來，因此先把這三個內容少點的整合到一篇文章先總結了先。明天看看花點時間把那三個給寫完整吧，估計須要分三篇文章來記錄$animate、$interpolate和$http呢。

相關標籤/搜索

indexwriter+document+field

1.angularjs

AngularJS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。