Question

我是AngularJS的新手。我尝试使用ng-if和ng-click将模态切换到视图中。

基本上，在我的控制器中，我有一个名为＆＃34; aboutOn＆＃34;的范围变量。如果为true，则显示模态。如果它是假的，那就不是。简单。

ng-if部分有效。但是ng-click部分引起了麻烦。有时，它只是不起作用。

要打开模态我有这个：

<div id="about-link-container" ng-click="aboutOn=true">
  <p><i class="far fa-info-circle"></i>&nbsp;&nbsp;About</p>
</div>

这不符合我希望它如何工作。如果我点击实际文本，没有任何反应。它仅在我单击边框时触发，而不是直接在链接上触发。如果我将ng-click放在p标签上，它根本不起作用。

然后在模态中，我有这个关闭它：

<div class="about-close">
     <i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>

这根本不起作用。这里发生了什么？这是我的控制器，如果它可能相关：

angular.module('myApp', [])
.controller('myController', ['$scope', function myController($scope) {
    $scope.female_name = "female name"; 
    $scope.position = "position"; 
    $scope.tedious_task = "tedious task"; 
    $scope.dirty_task = "dirty task"; 
    $scope.female_name = "female name"; 
    $scope.celebrity = "celebrity"; 
    $scope.useless_skill = "useless skill"; 
    $scope.aboutOn = false; 
}]);

以下是整个视图：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link href="https://fonts.googleapis.com/css?family=Gamja+Flower|Oswald" rel="stylesheet">
        <script data-require="angular.js@1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
        <script src="main.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body ng-app="myApp">
        <div ng-controller='myController'>
            <div class="form">
                <div id="about-link-container" ng-click="aboutOn=true">
                    <p><i class="far fa-info-circle"></i>&nbsp;&nbsp;About</p>
                </div>
                <h1>M<img src="angular-logo.png" class="logo" />DLIBS</h1>
                <div class="form-inner">
                    <h2>Provide the following words:</h2>         
                    <input ng-model="female_name" />
                    <input ng-model="position" />
                    <input ng-model="tedious_task" />
                    <input ng-model="dirty_task" />
                    <input ng-model="celebrity" />
                    <input ng-model="female_name" />
                    <input ng-model="useless_skill" />
                </div>
            </div>
            <div class="display">
                <p>{{ female_name }} was a {{ position }}. Although she loved parts of her job, 
                    she absolutely hated {{tedious_task}} and {{dirty_task}}. So, {{female_name}} met 
                    with her life mentor {{celebrity}} who told her to learn how 
                    to {{useless_skill}} at school. Her school didn't offer a 
                    course on {{useless_skill}} so she studied programming instead. 
                </p> 
            </div>

            <div ng-if="aboutOn" class="about">
                <div class="about-main">
                        <div class="about-close">
                            <i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
                        </div>
                            <h2 class="about-title"><i class="fas fa-info-circle"></i>&nbsp;&nbsp;About</h2>
                            <p class="about-p">Madlibs is an AngularJS application. When user fill in the words in 
                                the form above, those words will automatically populate the paragraph below. 
                                Try different combinations!
                            <br />
                            <br />
                            This application was made in 2018 by Jack Seabolt. It was constructed using AngularJS.     
                            </p>   
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

有两个问题可以解决这个问题。

ng-if创建自己的范围。

因此，如果您想达到控制器的范围，则需要ng-click="$parent.aboutOn=false"

FA图标替换DOM（？）。您无法在图标上显示ng-click。

用<div>（就像你已经）包裹你的图标并将ng-click放在上面

<div class="about-close">
  <i class="fas fa-times about-close-icon" ng-click="aboutOn=false"></i>
</div>

到此：

<div class="about-close" ng-click="$parent.aboutOn=false">
  <i class="fas fa-times about-close-icon"></i>
</div>

AngularJS - ng-click按钮不起作用

1 个答案: