jquery 不工作或 angular js nghide show 在 angular 路由页面不工作

Question

我正在使用 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>

Answer 1

使用 angular ng-show 或 ng-hide 指令。

如果你想 hide/show 基于一些 interval/timeout 你可以使用 angular 内置服务 $timeout, $interval

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

Answer 2

为按钮设置 ng-click ，为您想要显示或隐藏设置 ng-show 。例子

<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"
}

jquery 不工作或 angular js nghide show 在 angular 路由页面不工作

jquery is not working or angular js nghide show not working in angular routing page

jquery

angularjs

ngroute