ng API Learning for Beasts--$anchorScroll, $controller, $document
$anchorScroll
According to the rules of HTML5, when this function is called, it checks the hash value of the current URL and scrolls to the corresponding element.
Listen for $location.hash () and scroll to the location specified by the URL of the anchor point. Can be disabled by $anchorscrollprovider.disableautoscrolling ().
Dependency: $window $location $rootScope
Use: $anchorScroll ();
Using code:
<style>
#id {
height:500px;
}
#bottom {
margin-top:1500px;
}
</style>
<div id= "Top" ng-click= "Gotobottom ()" > Skip to bottom </div>
<div id= "Bottom" ng-click= "Gototop ()" > Jump to Top </div>
<script>
Angular.module ("Demo", [])
. Controller ("Democtrl", ["$scope", "$location", "$anchorScroll",
function ($scope, $location, $anchorScroll) {
$scope. gototop = function () {
$location. Hash ("top");
$anchorScroll ();
};
$scope. Gotobottom = function () {
$location. Hash ("bottom");
$anchorScroll ();
};
}])
</script>
$controller
$controller is responsible for instantiating the controller.
This is a simple $injector call, but it is extracted into a service for the previous version of the service to be overwritten.
Dependency: $injector
Use: $controller (constructor,locals);
Constructor: If a function is called, then this function is considered a controller constructor. Otherwise, it is considered a string that uses the following steps to retrieve the controller's constructor:
1. Check if the controller is registered and named in $controllerprovider.
2. Check if the string on the current scope returns a constructor
3. Check the constructor on the global Window object.
Locals: Registers the controller locally.
Using code:
Angular.module ("Demo", [])
. Controller ("Testctrl", ["$scope", function ($scope) {
var = this;
$scope. Print = function () {
Console.log ("print");
};
Self.prt = function () {
$scope. Print ();
};
return self;
}])
. Controller ("Democtrl", ["$scope", "$controller", Function ($scope, $controller) {
var ctrl = $controller ("Testctrl", {$scope: $scope});
Ctrl.prt ();//print
}])
$document
A jquery or jqlite-wrapped browser Window.document object.
Dependency: $window
Using code:
<script src= ' angular.js ' ></script>
<title>title-$document </title>
<body>
<div id= "App" ng-app= "Demo" ng-controller= "Democtrl" >
</div>
<script>
Angular.module ("Demo", [])
. Controller ("Democtrl", ["$scope", "$document", Function ($scope, $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>
These two days by $animate and $interpolate and $http to toss heart tired ah, there is a small number of code has not been measured, so first of these three content less integration into an article first summed up first, sleepy ... Go to bed, see you tomorrow take a moment to write the three. It is estimated that three articles are required to record $animate, $interpolate and $http.
The beast's angular Api learning, translating and understanding-$anchorScroll, $controller, $document
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
