jquery 不起作用或 Angular js nghide 显示在 Angular 路由页面中不起作用答案

【问题标题】：jquery is not working or angular js nghide show not working in angular routing pagejquery 不起作用或 Angular js nghide 显示在 Angular 路由页面中不起作用
【发布时间】：2017-08-28 00:27:06
【问题描述】：

我正在使用 Angular 1.6 路由，在 ng-view 中我正在显示我的路由页面数据，但在路由页面中，我的 jquery 代码和用于隐藏和显示的 angular 代码不起作用，请帮助我。我是 angularjs 的新手。

<style>
.image-upload > input {
    display:none;
}
.edit-picture {
 position: absolute;
left: 46.5%;
top: 32%;
}
@media only screen and (max-width: 768px){
.edit-picture {
position: absolute;
left: 46.5%;
top: 78%;
 }
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#profile-button").click(function(){
    $("#2").show(1000);
    $("#1").hide(1000);
   });
  });
</script>
<div class="col-sm-12 col-lg-10" ng-controller="profile">
   <div class="text-center">
      <div class="col-sm-12">
        <div class="pull-right">
         <a id="profile-button"> <i class="fa fa-pencil fa-2x" style="cursor:pointer;color:#f7972f;"> </i> </a>
        </div>
        <div class="image-upload edit-picture">
            <label for="file-input">
                <i class="fa fa-camera fa-2x" style="cursor:pointer;color:#f7972f;"> </i>
            </label>
            <input id="file-input" type="file"/>
          </div>
          <img src="amit.jpg" class="img img-circle edit-image" style="width:150px;">
             <h3> Amit Singh Chauhan </h3>
        </div>
       <div class="col-sm-12"  id="1"> 
        <div class="col-sm-1"></div>
        <div class="col-sm-10" >
        This is detail Section
        </div>
        <div class="col-sm-1"></div>
    </div>
    <div class="col-sm-12"  id="2" style="display: none;"> 
        <div class="col-sm-1"></div>
        <div class="col-sm-10" >
        <form action="" novalidate="novalidate">
            <p><span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First Name"></span></p>
            <p><span class="wpcf7-form-control-wrap last-name"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Last Name"></span></p>
            <p><span class="wpcf7-form-control-wrap email-address"><input type="email" name="email-address" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-mail Address"></span></p>
            <div><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Comment"></textarea></span></div>
            <div><input type="submit" value="Save Profile" class="wpcf7-form-control wpcf7-submit mkd-contact3"><span class="ajax-loader"></span></div>
        </form>
        </div>
        <div class="col-sm-1"></div>
    </div>
</div>

【问题讨论】：

请详细说明您的controller 代码，并且在您的html 中也看不到ng-show\ng-hide 的使用。
不要将 AngularJS 与 jQuery 混合使用！
AngularJS 在哪里？
我尝试使用 angular nghide show 但它不起作用，所以我更喜欢 jquery bt 也不起作用

标签： jquery angularjs ngroute

【解决方案1】：

设置 ng-click 为 button ， ng-show 为你想要的 show 或 hide 。例子

<button ng-click ="clickme()">Click</button>
<div ng-show="show1">abc</div>
<div ng-show="show2">def</div>

在 js 文件中，你应该把 ng-app 放在 html 中。 <html ng-app="yourapp">

编辑

  (function(){
            angular.module('yourapp',[])
                    .controller('yourcontroller',yourcontroller);
                    yourcontroller.$inject =['$scope','$timeout'];
                    function yourcontroller($scope,$timeout){
                        $scope.show1 = true;
                        $scope.show2=false;
                        $scope.clickme = function(){
    $timeout(function(){
    $scope.show1 =!$scope.show1;
    $scope.show2=!$scope.show2
    },1000);
    }
                    }
        })()

在你的配置路线中

  .when("/profile", {
        templateUrl : "profile.php",
        controller : "profilecontroller"
}

【讨论】：

我在路由页面中使用了这个隐藏显示，所以它不起作用
在我的头文件中我使用了这个
gmpg.org/xfn/11"> 项目标题
好的.. 我正在使用角度路由，其中我路由了 3 到 4 个页面。其中之一是 profile.php，我想在其中隐藏和显示 div，所以我使用 nghide 并显示，但它在该页面中不起作用
@amitchauhan 我看不出#1 和#2 在哪里离你而去。但简单的方法是像我的示例和它一样添加 ng-show，并在 js 文件中对我做同样的事情

【解决方案2】：

使用角度 ng-show 或 ng-hide 指令。

如果您想根据某个间隔/超时隐藏/显示，您可以使用角度内置服务 $timeout, $interval

$timeout(function () {    
    $scope.{model_name} = false;   
}, timeout_value);

【讨论】：