controller 间共享数据

最新推荐文章于 2021-03-13 09:07:40 发布

原创最新推荐文章于 2021-03-13 09:07:40 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJs

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

本文通过一个具体的示例介绍了如何使用AngularJS在两个不同的控制器(CtrlF和CtrlS)之间共享数据。示例中创建了一个名为Data的服务来保存和传递数据，两个控制器通过依赖注入的方式获取这个服务并实现数据的同步更新。当用户在一个输入框中修改文本时，另一个输入框以及对应的标题会实时更新为相同的文本。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <style>
        body {
            padding-top:30px;
        }
    </style>
    <script src="angular.js"></script>
    <script>
        angular.module('myapp', [])
        .factory("Data", function() {
            return {
                msg:"hello world"
            };
        })
        .controller("CtrlF", function($scope, Data) {
            $scope.data = Data;
        })
        .controller("CtrlS", function($scope, Data) {
            $scope.data = Data;
        });
    </script>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">

<div ng-controller="CtrlF">
    <input type="text" ng-model="data.msg">
    <h1>{{data.msg}}</h1>
</div>

<div ng-controller="CtrlS">
    <input type="text" ng-model="data.msg">
    <h1>{{data.msg}}</h1>
</div>

</div>
</div>
</body>

</html>

效果如图，