Сохранять угловой контент в index.html на страницах шаблона?

0

Есть ли способ, чтобы содержимое страницы просмотра не отображалось на страницах шаблона?

Скажем, моя индексная страница отображает сообщения в блоге и имеет код

    <!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, отображаются на странице реестра, а также во всех других шаблонах. (тестовый пост) Изображение 174551

Код для 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;
            });
    }
}
    };
      }]);

Пожалуйста, дайте мне знать, нужна ли дополнительная информация, так как я не уверен, где именно лежит проблема. Благодарю.

Теги:
model-view-controller
templates

1 ответ

1
Лучший ответ

Взгляните на 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 должно быть оценочным выражением. Взгляните на примеры, представленные официальной документацией.

  • 0
    Хм, спасибо, очень приятно знать.
  • 0
    Можете ли вы уточнить, где ваш ответ применим в моем коде для решения, которое я ищу? Я до сих пор не уверен, что ответ. Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню