Question

更新我在底部添加了完整的HTML输出。

第二次更新最底层是我在文件“app.js”中定义角度模块的方法

我正在尝试使用ng-click来激活其他地方的ng-show。

<div class="img_div" ng-click="showSwiper = ! showSwiper">
    <img class="modal_img img_screenings" src="images/producersclub.jpg">
    <p class="movie_p" align="center">EXPANDED METAL, 11am</p>
    <p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
    <p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
    <p class="date_p" align="center">May 29, 2017</p></div>
</div>


<div class="swiper-container" ng-show="showSwiper">
....
</div

当我点击div img_div时，似乎没有任何内容发生，并且元素swiper-container没有出现。

我认为我不需要向控制器添加任何东西来使其工作。我的控制器：

(function () {

    angular
        .module('app')
        .controller('screeningsController', Controller);

    function Controller($scope, $location, $anchorScroll) {

        $scope.scrollTo = function(id) {
            $location.hash(id);
            $anchorScroll();
        }

        $scope.seo = { 
            metaTitle : '', metaDescription : '' 
            }; 

        $scope.$parent.seo = { 
            metaTitle : 'Screenings', 
            metaDescripton: 'A list of all upcoming screenings.' 
            }; 
        }
    }
)();

是否需要对控制器进行任何操作才能使其正常工作？

<html ng-app="app" class="ng-scope">
    <head>
        <style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>

    <meta charset="UTF-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!--prerender.io & Facebook-->
    <meta name="fragment" content="!">
    <meta property="og:url" content="">
    <meta property="og:title" content="Screenings">
    <meta property="og:description" content="">
    <meta property="og:image" content="">

    <!--angular hash correction-->
    <base href="/">

    <!--swiper-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" type="text/css">

    <!--main-->
    <link rel="stylesheet" href="css/style.css" type="text/css">

    <!--swiper style-->
    <link rel="stylesheet" href="css/swiper.css" type="text/css">


</head>

<body>

    <!-- Swiper -->
    <div class="swiper-container swiper-container-horizontal ng-hide" ng-show="showSwiper">

        <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
            <div class="swiper-slide swiper-slide-active" data-hash="the-producers-club" style="width: 1280px; margin-right: 30px;">
                <img class="swiper_img" src="images/producersclub.jpg">
            </div>
            <div class="swiper-slide swiper-slide-next" data-hash="hummingbird-studios" style="width: 1280px; margin-right: 30px;">
                <img class="swiper_img" src="images/CHI.png">
            </div>
            <div class="swiper-slide" data-hash="anthology-film-archives" style="width: 1280px; margin-right: 30px;">
                <img class="swiper_img" src="images/large.jpg">
            </div>
            <div class="swiper-slide" data-hash="red-hook-vision-center" style="width: 1280px; margin-right: 30px;">
                <img class="swiper_img" src="images/13119742_10209232217392526_8176078770950589764_o.jpg">
            </div>
            <div class="swiper-slide" data-hash="latino-sports-club" style="width: 1280px; margin-right: 30px;">
                <img class="swiper_img" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg">
            </div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-fraction" style="display: none;">
            <span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">5</span></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next fader" style="display: none;">
        </div>
        <div class="swiper-button-prev fader swiper-button-disabled" style="display: none;"></div>
    </div>

    <!--angular partials-->
    <!-- uiView: --><ui-view class="ng-scope">

<!--HERE ARE THE NG-CLICKS-->   
<div id="screenings" class="ng-scope">
    <div class="img_div" ng-click="showSwiper = !showSwiper">
        <img class="modal_img img_screenings" src="images/producersclub.jpg">
        <p class="movie_p" align="center">EXPANDED METAL, 11am</p>
        <p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
        <p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
        <p class="date_p" align="center">May 29, 2017</p>
    </div>
    <div class="img_div" ng-click="showSwiper = !showSwiper">
        <img class="modal_img img_screenings" src="images/CHI.png">
        <p class="movie_p" align="center">EXPANDED METAL, 9pm</p>
        <p class="screenings_p" align="center">HUMMINGBIRD STUDIOS</p>
        <p class="location_p" align="center">CHICAGO, IL</p>
        <p class="date_p" align="center">April 21, 2017</p>
    </div>
    <div class="img_div" ng-click="showSwiper = !showSwiper">
        <img class="modal_img img_screenings" src="images/large.jpg">
        <p class="movie_p" align="center">EXPANDED METAL, 6pm</p>
        <p class="screenings_p" align="center">ANTHOLOGY FILM ARCHIVES</p>
        <p class="location_p" align="center">NEW YORK, NY</p>
        <p class="date_p" align="center">September 14, 2016</p>
    </div>
    <div class="img_div" ng-click="showSwiper = !showSwiper">
        <img class="modal_img img_screenings" src="images/13119742_10209232217392526_8176078770950589764_o.jpg">
        <p class="movie_p" align="center">EXPANDED METAL, 8pm</p>
        <p class="screenings_p" align="center">RED HOOK VISION CENTER</p>
        <p class="location_p" align="center">BROOKLYN, NY</p>
        <p class="date_p" align="center">May 19, 2016</p>
    </div>
    <div class="img_div" ng-click="showSwiper = !showSwiper">
       <img class="modal_img img_screenings" src="images/12419141_10208971503394839_6519551385362745616_o (1).jpg">
       <p class="movie_p" align="center">EXPANDED METAL, 11:15pm</p>
       <p class="screenings_p" align="center">LATINO SPORTS CLUB</p>
       <p class="location_p" align="center">BROOKLYN, NY</p>
       <p class="date_p" align="center">April 1, 2016</p>
   </div>   
</div>

<script class="ng-scope">

    swiper.update();
    //clear any pre-loaded slides
    swiper.removeAllSlides();

    //store images in swiper
        $(".modal_img").each(function(i,x) {
            var closest_venue = ($(this).closest('.img_div').find('.screenings_p').text());
            closest_venue = closest_venue.replace(/\s+/g, '-').toLowerCase();
            console.log(closest_venue);
            swiper.appendSlide('<div class="swiper-slide" data-hash="' + closest_venue + '"><img class="swiper_img" src="' + $(this).attr("src") + '"/></div>');
        })


    //open swiper

    //click an image
    $(".img_div").click(function() {
        //find position within swiper sliders
        var position = $(this).index();
        //show swiper
        //$('.swiper-container').css('display', 'inline');
        swiper.update();
        //jump to position in swiper
        swiper.slideTo(position,0,false );
    });


    //click events

    //attach click event to previous button
    $(".swiper-button-prev").click(function(){
        $(".swiper-button-prev").data('clicked', true);
    });
    //attach click event to next button
    $(".swiper-button-next").click(function(){
        $(".swiper-button-next").data('clicked', true);
    });
    //attach click event to swiper image
    $(".swiper_img").click(function(){
        $(".swiper_img").data('clicked', true);
    });


    //close swiper

    //click container
    $(".swiper-container").click(function() {
        //if previous button was clicked, do nothing
        if($('.swiper-button-prev').data('clicked')) {
        //if next button was clicked, do nothing
        } else if($('.swiper-button-next').data('clicked')) {
        //if image was clicked, do nothing
        } else if($('.swiper_img').data('clicked')) {
        //close container
        } else
            //$('.swiper-container').css('display', 'none');
            //reset click events
            $(".swiper-button-prev").data('clicked', false);
            $(".swiper-button-next").data('clicked', false);
            $(".swiper_img").data('clicked', false);
    });

</script>
</ui-view>

</body>
</html>

app.js中角度模块的定义（function（）{

    angular
        .module('app', ['ui.router'])
        .config(config)
        .run(run);

    etc.

Answer 1

尝试以下代码

ng-click =＆＃34; showSwiper =！showSwiper＆＃34;

并发布完整的HTML和控制器

Answer 2

试试这个：

    function Controller($scope, $location, $anchorScroll) {
        $scope.showSwiper = false;

        $scope.scrollTo = function(id) {
            $location.hash(id);
            $anchorScroll();
        }
        .... // more code

现在定义了变量，其余的应该起作用

Answer 3

请检查您的问题工作plnkr

https://plnkr.co/edit/p7ZaebihQjSZ1Yvi9upM?p=preview

HTML

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="screeningsController">
    <div class="img_div" ng-click="showSwiper = !showSwiper">
    <img class="modal_img img_screenings" src="images/producersclub.jpg">
    <p class="movie_p" align="center">EXPANDED METAL, 11am</p>
    <p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
    <p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
    <p class="date_p" align="center">May 29, 2017</p></div>
</div>


<div class="swiper-container" ng-show="showSwiper">
Display section 
</div>
  </body>

</html>

Js

var app = angular.module('plunker', []);

(function () {

    angular
        .module('plunker')
        .controller('screeningsController', Controller);

    function Controller($scope, $location, $anchorScroll) {

        $scope.scrollTo = function(id) {
            $location.hash(id);
            $anchorScroll();
        }

        $scope.seo = { 
            metaTitle : '', metaDescription : '' 
            }; 

        $scope.$parent.seo = { 
            metaTitle : 'Screenings', 
            metaDescripton: 'A list of all upcoming screenings.' 
            }; 
        }
    }
)();

Answer 4

您的代码运行正常。问题可能在于您的HTML结构。您发布的HTML中还有一个closing div。

工作代码段

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
  $scope.showSwiper = false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="img_div" ng-click="showSwiper = ! showSwiper">
    <img class="modal_img img_screenings" src="">
    <p class="movie_p" align="center">EXPANDED METAL, 11am</p>
    <p class="screenings_p" align="center">THE PRODUCERS CLUB</p>
    <p class="location_p" align="center">PHILIP K. DICK FILM FESTIVAL</p>
    <p class="date_p" align="center">May 29, 2017</p></div>

<div class="swiper-container" ng-show="showSwiper">
....
</div>
</div>

＆＃13;

Angular：点击div不工作

4 个答案: