网站首页 » 前端开发 » JavaScript » AngularJS 多个控制器共享服务
上一篇:
下一篇:

AngularJS 多个控制器共享服务

多个控制器共享同一个服务(Service),就是一个控制器操作的数据会影响到其它控制器中的数据。

下面直接贴出代码:

HTML 代码

index.html
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>AngularJS 多个控制器共享服务</title>
    <link rel="stylesheet" href="http://yunkus.com/demo/lib/css/bootstrap.min.css">
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
    <script src="./js/MyFactory.js"></script>
    <script src="./js/ctrl1.js"></script>
    <script src="./js/ctrl2.js"></script>
    <script src="./js/ctrl3.js"></script>
</head>
<body>
<div class="container">
<!-- ctrl1 -->
<h2>ctrl1</h2>
<div ng-controller="ctrl1">
 <table class="table table-bordered table-striped">
     <tr>
         <td>网站名</td>
         <td>网站域名</td>
     </tr>
     <tr ng-repeat="item in data1.webs">
         <td>{{item.name}}</td>
         <td>{{item.domain}}</td>
     </tr>
 </table>
</div>
<!-- ctrl1 END -->
<!-- ctrl2 -->
<h2>ctrl2</h2>
<div ng-controller="ctrl2">
 <table class="table table-bordered table-striped">
     <tr>
         <td>网站名</td>
         <td>网站域名</td>
     </tr>
     <tr ng-repeat="item in data2.webs">
         <td>{{item.name}}</td>
         <td>{{item.domain}}</td>
     </tr>
 </table>
</div>
<!-- ctrl2 END -->
<!-- ctrl3 -->
<div ng-controller="ctrl3">
    <h2>findById</h2>
    <table class="table table-bordered table-striped">
        <tr>
            <td>网站名</td>
            <td>网站域名</td>
        </tr>
        <tr>
            <td>{{myWeb.name}}</td>
            <td>{{myWeb.domain}}</td>
        </tr>
    </table>
    <button ng-click="deleteAll()" class="btn btn-danger">删除所有</button>
</div>
<!-- ctrl3 END -->
</div>
</body>
</html>

JavaScript 代码

ctrl1.js
/*
* @Author: zhaoxixiong
* @Date:   2017-09-27 23:10:58
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-09-27 23:13:18
*/
m.controller("ctrl1",["$scope","MyService",function($scope,MyService){
    MyService.all().then(function(response){
        $scope.data1 = response;
    });
}]);
ctrl2.js
/*
* @Author: zhaoxixiong
* @Date:   2017-09-27 23:10:58
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-09-27 23:14:01
*/
m.controller("ctrl2",["$scope","MyService",function($scope,MyService){
    MyService.all().then(function(response){
        $scope.data2 = response;
    });
}]);
ctrl3.js
/*
* @Author: zhaoxixiong
* @Date:   2017-09-27 23:10:58
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-09-27 23:13:57
*/
m.controller("ctrl3",["$scope","MyService",function($scope,MyService){
    MyService.findById(2).then(function(response){
        $scope.myWeb = response;
    });
    $scope.deleteAll = function(){
        MyService.deleteAll();
    }
}]);
MyFactory.js
/*
* @Author: zhaoxixiong
* @Date:   2017-09-27 21:51:03
* @Last Modified by:   zhaoxixiong
* @Last Modified time: 2017-09-27 23:10:40
*/

var m = angular.module("yk",[]);
m.factory("MyService",["$http",function($http){
    var myObj = {
        data :{webs:[]},
        all:function(){
            return $http({url:"data.php"}).then(function(response){
                myObj.data.webs = response.data;
                return myObj.data;
            });
        },
        findById:function(id){
            return this.all().then(function(data){
                for(var i=0;i<data.webs.length;i++){
                    if(data.webs[i].id == id){
                        return data.webs[i];
                    }
                }
            });
        },
        deleteAll:function(){
            myObj.data.webs = [];
        }
    }
    return myObj;
}]);

DEMO 可以看这里:http://yunkus.com/demo/angularjs/angularjs-mutil-controller-share-service/

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angularjs-mutil-controller-share-service/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END