Есть ли способ, чтобы содержимое страницы просмотра не отображалось на страницах шаблона?
Скажем, моя индексная страница отображает сообщения в блоге и имеет код
<!DOCTYPE html>
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.0.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-controller="WelcomeCtrl">
<div ng-view></div>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/">Home</a>
<a class="blog-nav-item " href="#/register">Register</a>
</nav>
</div>
</div>
<div class="list-group" ng-repeat="article in articles">
<a href="#" onclick="return false;" class="list-group-item active">
<h4 class="list-group-item-heading">{{article.title}}</h4>
<p class="list-group-item-text">{{article.post}}</p>
</a>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="register/register.js"></script>
<script src="welcome/welcome.js"></script>
<script src="addPost/addPost.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
Когда у меня есть шаблонные страницы, например шаблон регистра, сообщения навигация и блог, предназначенные только для index.html, отображаются на странице реестра, а также во всех других шаблонах. (тестовый пост)
Код для register.html
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>AngularJS Blog</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="https://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript" src="ladda.min.js"></script>
<link href="ladda-themeless.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS Blog!</h2>
</div>
<form class="form-signin" name="regForm">
<div class="form-group" ng-class="{ 'has-error' : regForm.email.$invalid }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p class="help-block" ng-show="regForm.email.$invalid">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : regForm.password.$invalid }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
<p class="help-block" ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
<p style="color:red;" ng-show="regError">{{regErrorMessage}}</p>
</div>
<button type="button" ladda-loading="login.loading" data-style="expand-right" ng-click="signUp();" ng-disabled="!user.email || !user.password" class="btn btn-lg segoe-ui-light ladda-button btn-primary btn-block">Register</button>
</form>
</div>
</body></html>
Код для register.js
'use strict';
angular.module('myApp.register', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/register', {
templateUrl: 'register/register.html',
controller: 'RegisterCtrl'
});
}])
.controller('RegisterCtrl', ['$scope','$location','$firebaseAuth', function($scope,$location,$firebaseAuth) {
$scope.mesg = 'Hello';
var firebaseObj = new Firebase("myblog-xxx.com");
var auth = $firebaseAuth(firebaseObj);
var login={};
$scope.login=login;
$scope.signUp = function() {
if (!$scope.regForm.$invalid) {
var email = $scope.user.email;
var password = $scope.user.password;
if (email && password) {
login.loading = true;
auth.$createUser(email, password)
.then(function() {
// do things if success
console.log('User creation success');
$location.path('/home');
}, function(error) {
// do things if failure
console.log(error);
$scope.regError = true;
$scope.regErrorMessage = error.message;
});
}
}
};
}]);
Пожалуйста, дайте мне знать, нужна ли дополнительная информация, так как я не уверен, где именно лежит проблема. Благодарю.
Взгляните на ng-if ng-show ng-hide
директивы ng-if ng-show ng-hide
https://docs.angularjs.org/api/ng/directive/ngIf
ng-if
лучше с точки зрения производительности.
ng-show
будет отображать элемент и использовать display:none
чтобы скрыть его, ng-if
он действительно удалит элемент из DOM и будет его повторно создать, если это необходимо. Вам может понадобиться ng-show
для элементов, которые часто переключаются в выключенном состоянии, но в 95% случаев ng-if
- лучший способ пойти.
Тем не менее, я думаю, что ваша настоящая проблема заключается в том, что изменения в вашем маршруте - это то, что делает <div ng-view></div>
.
ngView - это директива, которая дополняет услугу $ route, включая отображаемый шаблон текущего маршрута в файл основного макета (index.html). Каждый раз, когда изменяется текущий маршрут, входящий в него просмотр изменяется в соответствии с настройкой службы $ route.
Поэтому, очевидно, если вы объявите другие компоненты вне ваших шаблонов в вашем index.html, эти теги будут отображаться во всех представлениях.
Например:
<div ng-view></div>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/">Home</a>
<a class="blog-nav-item " href="#/register">Register</a>
</nav>
</div>
Там, независимо от вашего шаблона, будет отображаться панель навигации.
BTW, если вы все еще хотите управлять им за пределами своего ng-view
вы можете использовать ng-if
. Как это:
<div class="blog-masthead" ng-if="expression">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#/">Home</a>
<a class="blog-nav-item " href="#/register">Register</a>
</nav>
</div>
expression
должно быть оценочным выражением. Взгляните на примеры, представленные официальной документацией.