在其他页面上显示div angularjs

Question

我在印度有一个带有物业信息的div，如果用户单击一个按钮，

该页面应重定向到另一个页面，我的整个div应该被复制

然后在另一页上打开

<div class="box2">
                    <div style="">
                        <img src="2.jpg" style="border: 2px solid #EEEEEE; height: 180px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12" />
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 select">
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:16px; font-weight:bold">{{i.A}}</span>
                        </div>
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:12px; font-weight:lighter">Available For <b>{{i.B}}</b> </span>
                        </div>
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Area <b>{{i.C}}</b> Security <b> Rs. {{i.F}}</b></span>
                        </div>
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">Rental Unit In<b style="cursor:pointer"> {{i.D}}</b></span>
                        </div>
                        <br />
                        <div class="borderdiv">
                            <span ng-repeat="i in data" style="font-size:14px; font-weight:normal">
                                Features
                                <br />
                                <span class="glyphicon glyphicon-eject" style="margin-left:20px;"></span>
                                <span class="glyphicon glyphicon-chevron-left" style="margin-left:20px;"></span>
                                <span class="glyphicon glyphicon-chevron-right" style="margin-left:20px;"></span>
                            </span>
                        </div>
                        <br />
                        <div class="borderdiv">
                            <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.E}}</span>
                        </div>
                    </div>
                </div>

这是我的div

<button ng-click="click()">click to view data</button>

这是我的按钮

如果我想在其他页面上看到相同的数据，该怎么办？

Answer 1

您需要创建一个服务器端结构模板，该模板将生成div 。 PHP中的示例

function getViewData() {
    ?>
    <button ng-click="click()">click to view data</button>
    >?php
}

如果您使用的是这样的PHP文件，则可以在结构中的任何位置添加：

<?php getViewData(); ?>

Answer 2

我建议您使用包含有您要查找的数据的有角工厂 ，并在相应页面中使用html模板。

按钮代码与

<button ng-click="click()">click to view data</button>

如下创建一个新的Angular Factory

angular.module('myApp').factory('appVariables',function(){
        var data2=[];
        return{
                data2,data2
        }
});

您的控制器应包含以下click（）方法

angular.module('myApp').controller('appController',function($scope,appVariables){

        $scope.click=function(){
            appVariables.data2=$scope.data2;
        }
})

转到另一页，将appVariables作为依赖项注入控制器，您可以在整个应用程序中获得相同的data2。

此代码是通用的，因为您提供的信息很少。

Answer 3

我为您整理了一个样品。 我无法创建多个HTML页面。 因此，您必须将它们放在不同的文件中。

 var app = angular.module('sample', []);] //JS1 app.controller('page1Controller', ['$scope','$http','$rootScope', function($scope, $http){ $scope.page1 = {}; $scope.page1.title = "Page1"; $scope.click = function(page){ $rootScope.page = page; } }]); //JS2 app.controller('page2Controller', ['$scope','$http','$rootScope', function($scope, $http){ $scope.init = function(){ alert("alrt") $scope.page2 = $rootScope.page; } }]); 

 <div ng-app="sample"> <!--Page1--> <div ng-controller="page1Controller"> <div>{{page1.title}}</div> <button ng-click="click(page1)">click to view data</button> </div> <!--Page2--> <div ng-app="sample"> <div ng-controller="page2Controller" ng-init="init()"> <div>{{page2.title}}</div> </div>