多个控制器内数据共享

最新推荐文章于 2024-07-15 08:45:59 发布

原创最新推荐文章于 2024-07-15 08:45:59 发布 · 624 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据共享 #prevSibling #factory #service

AngularJS学习笔记专栏收录该内容

16 篇文章

订阅专栏

通过$$prevSibling方法实现共享：

JS页面：

angular.module('myApp',[])

.controller('firstController', function($scope){

        $scope.date = {

           name: "Tom"};

        console.log($scope);

})

.controller('secondController', function($scope){

        $scope.date = $scope.$$prevSibling.date;

})

html页面：

<body>

    <div ng-app="myApp">

        <div ng-controller="firstController">

            <input type="text" ng-model="date.name" />

<p>

                first:{{date.name}}

            </p>

            

        </div>

        <div ng-controller="secondController">

<p>

                second:{{date.name}}

            </p>

        </div>

    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>

<script type="text/javascript" src="app/index.js"></script>

</body>

通过factory或者service方法实现共享：

JS页面：

angular.module('myApp',[])
.factory('factoryName', function(){
return{
message:'this is the message we shared'
}
.controller('firstController', function($scope,factoryName){//这里根据angular的自动注入把factory的名字加进去
$scope.date = {
name: "Tom"};
console.log($scope);
$scope.factoryName = factoryName;
.controller('secondController', function($scope,factoryName){
$scope.date = $scope.$$prevSibling.date;
$scope.factoryName = factoryName;
console.log($scope);
})
})
})

html页面：

<body>
    <div ng-app="myApp">

        <div ng-controller="firstController">
            <input type="text" ng-model="date.name" />
            <input type="text" ng-model="factoryName.message" />
            <p>
                first:{{date.name}}
            </p>
            <p>
                firstMessage:{{factoryName.message}}
            </p>
        </div>

        <div ng-controller="secondController">
            <p>
                second:{{date.name}}
            </p>
            <p>
                secondMessage:{{factoryName.message}}
            </p>
        </div>
    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>