Angularjs[15] - 多个控制器实现数据共享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            first.Data:<input type="text" ng-model="Data.message">
            <p>
                first-message: {{Data.message}}
            </p>
        </div>
        <div ng-controller="secondController">
            <p>
                second-message: {{Data.message}}
            </p>
        </div>
    </div>
<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
angular.module(‘myApp‘,[])
.factory(‘Data‘,function () {
    return{
        message:‘共享数据‘
    };
})
.controller(‘firstController‘,function ($scope,Data) {
    $scope.Data = Data;
})
.controller(‘secondController‘,function ($scope,Data) {
    $scope.Data = Data;
});

时间: 2024-10-13 12:16:29

Angularjs[15] - 多个控制器实现数据共享的相关文章

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--> <sc

黄聪:AngularJS 动态加载控制器实例-ocLoazLazy

一.AngularJS动态加载控制器和视图实例 路由配置关键代码: [javascript] view plain copy print? //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据和控制器***/ views: { "": { templateUrl: function ($stateParams) { console.info($stateParams); return '/template/

AngulatJS多个控制器内数据共享

利用factory和service方法定义服务,通过两个控制器利用同一个服务达到控制器间数据共享的效果. <!DOCTYPE html> <html> <head>     <meta charset="utf-8"> </head> <body ng-app="app">     <div ng-controller="Controller1">        

AngularJS笔记---作用域和控制器

什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.  一.$rootScope 1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller,  app.run是module被加载时候执行的代码. 可

AngularJS之作用域及控制器(一)

前言 之前有接触过基本的AngularJS,未过多涉及,于是乎本系列我们来着重讲讲AngularJS,对AngularJS中重要的几大内容进行梳理并进行一些小的例子的书写.在之前项目过程中用到过avalon,但是avalon并未被广泛使用也就放弃了,至于孰最轻量,性能更好作为非专业的我就不妄下结论,lz只明白一点,业界最流行什么前端框架,招聘大部分要求会哪些框架,lz才会去学习,当然其中的乐趣也是油然而生,每一次敲代码的过程好似在浩瀚大海中探幽一番,别有一番滋味. 简短介绍 AngularJS也

[D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive

Integrating D3 with Angular can be very simple. In this lesson, you will learn basic integration as well as how to create D3 charts that can be packaged as AngularJS directives. <!DOCTYPE html> <html ng-app="app"> <head lang="

AngularJS(15)-依赖注入

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会

AngularJS之基础-3 控制器(基本语法)、模块(使用模块注册控制器)

一.基本语法 基本概念 - ng-controller function controllerName($scope,$http,$element){} $scope $http - $http.get(url).sucess(function(result){}) 定义基本数据类型 - $scope.Name = "John" - $scope.Email = [email protected] - $scope.Age = 30 定义对象属性 定义方法 二.模块 使用模块注册控制器

angularJS中如何写控制器

angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新的$scope给这个控制器 控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中.尽可能地精简控制器是很好的做法 控制器并不适合用来执行DOM操作.格式化或数据操作,以及除存储数据模型之外的状态维护操作,它只是视图和$scope之间的桥梁. demo.html <!doctype html