angular有意思的小技巧

最新推荐文章于 2021-04-16 09:22:24 发布

发疯的man

最新推荐文章于 2021-04-16 09:22:24 发布

阅读量434

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/lzh657083979/article/details/79110194

版权

angularJS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

实现自定义锚点功能（需要引入`$location,$anchorScroll`）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js"></script>

</head>
<body ng-app="app" ng-controller="c1">
{{name}}
<div id="div1" style="height: 500px;background: red"></div>
<div id="div2" style="height: 500px;background: #d5ff26"></div>
<div id="div3" style="height: 500px;background: #4c2cff"></div>
</body>
<script>
   var app=angular.module("app",[]);
    app.controller("c1",function($scope,$location,$anchorScroll){
        $scope.name="aaaa"
        //hash()的作用是让当前地址后面追加#div1   然后注入$anchorScroll 来实现的
        $location.hash("div1")
        console.log($location)
    })
</script>
</html>

利用`$cacheFactory`来实现各种controller的值传递

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="c1"></div>
    <div ng-controller="c2"></div>
</body>

<script>
   var app=angular.module("app",[]);
    app.controller("c1",function($scope,$cacheFactory){
        //先new一个$cacheFactory对象,起个名字
        var cache1=$cacheFactory("cache1");
        //放值
        cache1.put("age",12);
   })
   app.controller("c2",function($scope,$cacheFactory){

//       得到cachefactory根据上面定义的名字
       var cache2=$cacheFactory.get("cache1");
//       得到值
       var age= cache2.get("age");
        alert(age)
   })
</script>
</html>

angular插入html片段

需要引入一个插件，然后module就可以啦

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js"></script>
    <script src="https://cdn.bootcss.com/angular-sanitize/1.6.8/angular-sanitize.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="c1">
        <span ng-bind-html="html"></span>
    </div>

</body>

<script>
   var app=angular.module("app",["ngSanitize"]);
    app.controller("c1",function($scope){
       $scope.html='<h1>hhhhhhh</h1>';
   })

</script>
</html>

实现路由功能

同样需要引入路由插件，需要注意的是必须引入ng-view这个标签才会生效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="c1">

    </div>
    <hr/>
    <div ng-view></div>
</body>
<script>
   var app=angular.module("app",["ngRoute"]);
   app.config( function ($routeProvider) {
       $routeProvider
               .when('/',{template:'这是首页页面'})
               .when('/computers',{template:'这是电脑分类页面'})
               .when('/printers',{template:'这是打印机页面'})
               .otherwise({redirectTo:'/'});

       console.log($routeProvider)
   })


    app.controller("c1",function($scope){

   })
</script>
</html>

实现页面跳转及传值问题

这个坑比较多，因为angular会自己给我们连接后面带一些参数，导致跳转失败。需要特别处理一下。我也不知道原因，记住就行了暂时，需要 $locationProvider.hashPrefix('');来处理一下哈希前缀
http://blog.csdn.net/name_chc/article/details/78652441 参考博客
方案一，通过超链接的方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="c1">
        <a href="#">链接1</a>
        <a href="#computers">链接2</a>
        <a href="#printers/2/3">链接3</a>
    </div>
    <hr/>
    <div ng-view></div>
</body>
<script>
   var app=angular.module("app",["ngRoute"]);
   app.config( function ($routeProvider,$locationProvider) {
       $locationProvider.hashPrefix('');
       $routeProvider
               .when('/',{template:'这是首页页面'})
               .when('/computers',{template:'这是电脑分类页面'})
               .when('/printers/:id/:age',{template:'这是打印机页面',
                    controller:"c2"
               })
               .otherwise({redirectTo:'/'});

   })


    app.controller("c1",function($scope){

   })
   app.controller("c2",function($routeParams){
        console.log($routeParams)
   })
</script>
</html>

方案2，通过点击的方式
主要运用了$location.path（”“）的方法，会自动在后面加入path里面的参数作为路径。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/angular/angular.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="c1">
        <a ng-click="$location.path('')">链接1</a>
        <a ng-click="$location.path('computers')">链接2</a>
        <a ng-click="$location.path('printers/1/2')">链接3</a>
    </div>
    <hr/>
    <div ng-view></div>
</body>
<script>
   var app=angular.module("app",["ngRoute"]);
   app.config( function ($routeProvider,$locationProvider) {
       $locationProvider.hashPrefix('');
       $routeProvider
               .when('/',{template:'这是首页页面'})
               .when('/computers',{template:'这是电脑分类页面'})
               .when('/printers/:id/:age',{template:'这是打印机页面',
                   controller:"c1"
               })
               .otherwise({redirectTo:'/'});

   })
    app.controller("c1",function($scope,$location,$routeParams){
        console.log($location)
        console.log($routeParams)
        $scope.$location=$location;
   })

</script>
</html>

发疯的man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular有意思的小技巧

实现自定义锚点功能（需要引入$location,$anchorScroll）html>head lang="en"> meta charset="UTF-8"> title>title> script src="node_modules/angular/angular.js">script>head>body ng-app="app" ng-control
复制链接

扫一扫