使用工厂服务 factory

使用工厂服务 factory

var app=angular.module('myApp',[]);
// 声明一个工厂服务
app.factory("UserService",function($http){
var currentUser={}; // 保存当前用户数据
    return{
        getCurrentUser:function () {
            return currentUser;
        },
        setCurrentUser:function (user) {
            currentUser=user;
        }
    }
 });

// 声明两个控制器，他们之间通过userService服务通信
app.controller("MyFormController",function($scope,$rootScope,UserService) {
    $scope.submit=function () {
        UserService.setCurrentUser({username:$scope.username,age:$scope.age});
        $rootScope.$broadcast("currentUserChange")
    }
})

app.controller("MyController",function($scope,UserService) {
    // 监听currentUserChange消息，做出响应
    $scope.$on("currentUserChange",function () {
        $scope.username=UserService.getCurrentUser().username;
        $scope.age=UserService.getCurrentUser().age;
    })
})

<h2> 使用工厂服务</h2>
<form name="myForm" ng-controller="MyFormController" ng-submit="submit()" s>
    姓名：<input type="text" name="username" ng-model="username"><br>
    年龄： <input type="number" name="age" ng-model="age">
    <input type="submit">
</form>

<div ng-controller="MyController">
    姓名：{{username}}
    年龄：{{age}}
</div>