угловое шоу не работает

Question

угловое шоу не работает

0

Я пытаюсь сделать это угловато. Я работаю в версии 1.4.5 и не работает, только показываю элемент termsinfo, а в других ничего не делаю. Если кто-то может мне помочь, я отправлю код в симуляции, чтобы попробовать его.

// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
    $scope.termsinfo = true;
    $scope.cookiesinfo = false;
    $scope.privacy = false;
    $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }
    });
  
});

<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies" style="display: none;" ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>
  
            </section>
        </div>
    </div>
    <div id="private-policy" style="display: none;"  ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>
        
    </div>
</div>
</div>
  </body>

</html>

david raja 19 апр. 2016, в 15:56

Источник

Теги:

javascript

angularjs

4 ответа

Ещё вопросы

Oyeme · Answer 1 · 2016-04-19T10-38-00.000Z

Просто удалите style="display: none;" поскольку вы уже используете ng-show

// Code goes here
var app = angular.module('app',[]);
app.controller('legalController', function ($timeout, $scope) {
    $scope.termsinfo = true;
    $scope.cookiesinfo = false;
    $scope.privacy = false;
    $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }
    });
  
});

<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies" ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>
  
            </section>
        </div>
    </div>
    <div id="private-policy" ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>
        
    </div>
</div>
</div>
  </body>

</html>

VISHAL DAGA · Answer 2 · 2016-04-19T11-58-00.000Z

$ scope.terms не выполняется -

 $timeout(function () {
        $scope.terms = function () {
            $scope.termsinfo = true;
            $scope.cookiesinfo = false;
            $scope.privacy = false;
        }() //add these braces to execute
        $scope.cookies = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = true;
            $scope.privacy = false;
        }() //add these braces to execute
        $scope.private = function () {
            $scope.termsinfo = false;
            $scope.cookiesinfo = false;
            $scope.privacy = true;
        }()
    });

К сожалению !! да, я пропустил заметить, вам нужно удалить - display: none too

Syam Pillai · Answer 3 · 2016-04-19T10-48-00.000Z

Удалить style="display: none;" поскольку угловая директива не будет перезаписывать встроенные стили.

Punith Mithra · Answer 4 · 2016-04-19T12-34-00.000Z

remove style = "display: none;" это будет неявно добавлено выражением id ng-show false.

<!DOCTYPE html>
<html>

  <head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="legalController">
    <div id="splash">
    <div id="intro-container">
        <h1>legal</h1>
        <h3>Find legal information and resourcesservices</h3>
    </div>

    <div id="splash-overlay"></div>
</div>
<div id="legal-sections">
    <div id="switcher">
        <ul>
            <li><a id="open-terms-use" ng-click="terms()">Terms of Use</a></li>
<!--            <li><a id="open-security">Security</a></li>-->
            <li><a id="open-cookies" ng-click="cookies()">Cookies Policy</a></li>
            <li><a id="open-private" ng-click="private()">Private Policy</a></li>
        </ul>
    </div>
    <div id="terms-use" ng-show="termsinfo">
        <section>
            <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Terms of use</h1>
                </div></div>

        </section>
    </div>
    <div id="security">
    </div>
    <div id="cookies"  ng-show="cookiesinfo">
        <div>
            <section class="clear container-fluid" id="Cookies-Top">
                <div class="Bg-Mask"></div>
                <div class="container">
                    <h1 class="h2">Cookies</h1>
                </div>

            </section>
        </div>
    </div>
    <div id="private-policy"  ng-show="privacy">
        <div>
            <section>
                <div class="container">
                <div class="Ehl-Page-Header">
                    <h1 class="h2">Privacy</h1>
                </div></div>
            </section>

    </div>
</div>
</div>
  </body>

</html>