当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > AngularJS实现controller控制器间共享数据的方法示例

AngularJS实现controller控制器间共享数据的方法示例

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文实例讲述了angularjs实现controller控制器间共享数据的方法。分享给大家供大家参考，具体如下：

<!doctype html>
<html ng-app="myapp">
<head>
<title>www.jb51.net 控制器间共享数据</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" > 
  <style>
    body { 
      padding-top:30px; 
    }
  </style>
  <script src="angular.min.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><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

运行效果：

更多关于angularjs相关内容感兴趣的读者可查看本站专题：《angularjs指令操作技巧总结》、《angularjs入门与进阶教程》及《angularjs mvc架构总结》

希望本文所述对大家angularjs程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网