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

网络编程 AngularJS实现controller控制器间共享数据的方法示例 06-22

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

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>www.gimoo.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程序设计有所帮助。

AngularJS中scope的绑定策略实例分析
本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考，具体如下：当scope选项写为scope:{}这种形式的时候，就已经为指令生成了隔离作用域

Vue实战之vue登录验证的实现代码
最近一直在撸一个给大学生新生用的产品，在撸的时候有时候会发现自己力不从心，是不是我的能力下降，是不是我该放弃我的最热爱的事业了？这对

详解Vue用自定义指令完成一个下拉菜单（select组件）
这次分享的是关于Vue自定义指令的使用方法，学习完基础后我们再来实战完成一个下拉列表，废话不多说，直接上干货基本用法//全局注册Vue.directive('my-

编辑：广州葆元健康生物科技有限公司

标签：指令,实例,给大家,自定义,本文