Question

我正在使用ng-view和ng-template开发一个导航表单，其中有3页。

因此，当用户点击占位符时，工具提示会在其上方打开，他可以在其中填充实时显示在占位符上的值。

但是当用户导航到其他页面时，所有填充的数据都会发生变化。我也试过$rootScope，但没有帮助。有没有办法做到这一点？

（index.html的）

<head>
    <title>Angular App</title>
    <script src = "../angular.js"></script>
    <script src = "../angular-route.js"></script>
    <link rel="stylesheet" type="text/css" href="custom.css"></link>
</head>
<body>
    <div data-ng-app="mainApp" data-ng-controller="inlineEditorController" data-ng-click="hideToolTip()" data-ng-init="active='home'"> 
        <nav class="{{active}}">
            <a href="#home" class="home" data-ng-click="active='home'">Home</a>
            <a href="#dashboard" class="dashboard" data-ng-click="active='dashboard'">Dashboard</a>
            <a href="#history" class="history" data-ng-click="active='history'">History</a>
            <a href="#setting" class="setting" data-ng-click="active='setting'">Setting</a>
        </nav>
        <div data-ng-view></div>

        <script type="text/ng-template" id="home.html">
            <div class="tooltip" data-ng-click="$event.stopPropagation()" data-ng-show="showToolTip">
                <input type="text" data-ng-model="page">
            </div>
            <h1 data-ng-click="toggleToolTip($event)"> Welcome to {{page}} </h1>
        </script>

        <script type="text/ng-template" id="dashboard.html">
            <div class="tooltip" data-ng-click="$event.stopPropagation()" data-ng-show="showToolTip">
                <input type="text" data-ng-model="page">
            </div>
            <h1 data-ng-click="toggleToolTip($event)"> Welcome to {{page}} </h1>
        </script>

        <script type="text/ng-template" id="history.html">
            <div class="tooltip" data-ng-click="$event.stopPropagation()" data-ng-show="showToolTip">
                <input type="text" data-ng-model="page">
            </div>
            <h1 data-ng-click="toggleToolTip($event)"> Welcome to {{page}} </h1>
        </script>

        <script type="text/ng-template" id="setting.html">
            <div class="tooltip" data-ng-click="$event.stopPropagation()" data-ng-show="showToolTip">
                <input type="text" data-ng-model="page">
            </div>
            <h1 data-ng-click="toggleToolTip($event)"> Welcome to {{page}} </h1>
        </script>
    </div>

    <script type="text/javascript">

        var mainApp = angular.module("mainApp",["ngRoute"]);

        mainApp.config(["$routeProvider", function($routeProvider){
            $routeProvider.

            when("/home",{
                templateUrl: "home.html",
                controller:"homeController"
            }).
            when("/dashboard",{
                templateUrl:"dashboard.html",
                controller:"dashboardController"
            }).
            when("/history",{
                templateUrl:"history.html",
                controller:"historyController"
            }).
            when("/setting",{
                templateUrl:"setting.html",
                controller:"settingController"
            }).
            otherwise({
                redirectTo : "/home"    
            })
        }]);

        mainApp.controller("inlineEditorController",function($scope){

            $scope.hideToolTip = function(e){ 
                //e.stopPropagation();
                $scope.showToolTip = false;
            }
        })

        mainApp.controller("homeController",function($scope){
            $scope.page = "Home Page";
            $scope.showToolTip = false;

            $scope.toggleToolTip = function(e){ 
                e.stopPropagation();
                $scope.showToolTip = true;
            }
        })

        mainApp.controller("dashboardController",function($scope){
            $scope.page = "Dashboard Page";
            $scope.showToolTip = false;

            $scope.toggleToolTip = function(e){
                e.stopPropagation();
                $scope.showToolTip = true;
            }
        })

        mainApp.controller("historyController",function($scope){
            $scope.page = "history Page";
            $scope.showToolTip = false;

            $scope.toggleToolTip = function(e){
                e.stopPropagation();
                $scope.showToolTip = true;
            }
        })

        mainApp.controller("settingController",function($scope){
            $scope.page = "Setting Page";
            $scope.showToolTip = false;

            $scope.toggleToolTip = function(e){
                e.stopPropagation();
                $scope.showToolTip = true;
            }
        })

    </script>
</body>

（custom.css）

nav{
display: inline-block;
/*width: 70%;*/
background-color: #5597b4;
box-shadow:0 1px 1px #ccc;
border-radius:2px;
}

nav a{
display: inline-block;
padding: 20px;
/*width : 23%;*/
font-size: 13px;
font-weight: bold;
color:white;
text-decoration: none;
}

nav a:hover{
color:yellow;    
}

nav.home .home,
nav.dashboard .dashboard,
nav.history .history,
nav.setting .setting{
color:yellow !important;        
}
/*---The edit tooltip---*/
.tooltip{
background-color:#5c9bb7;

background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
background-image:linear-gradient(top, #5c9bb7, #5392ad);

box-shadow: 0 1px 1px #ccc;
border-radius:3px;
width: 290px;
padding: 5px;

position: absolute;
left:50%;
margin-left:-550px;
top: 120px;
}


.tooltip input{
border: none;
width: 100%;
line-height: 34px;
border-radius: 3px;
box-shadow: 0 2px 6px #bbb inset;
text-align: center;
font-size: 16px;
font-family: inherit;
color: #8d9395;
font-weight: bold;
outline: none;
}

$ scope变量在控制器切换时变化

0 个答案: