ng-show在index.html中不起作用,但在其他视图中,它在angularJs中工作正常

时间:2017-09-23 07:04:09

标签: angularjs

我需要的是带有btns的hrefs应该显示在登录/注册视图上,并且应该隐藏在dashBorad视图中

的index.html

<body>
  <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:20%">
    <div ng-controller="loginCtrl">
     <h3 class="w3-bar-item" >Menu</h3>
     <a ng-href="#!/signUp" class="w3-bar-item w3-button" ng-show="btns">SignUp</a>
     <a ng-href="#!/login" class="w3-bar-item w3-button" ng-show="btns">Login</a>
     <a ng-href="#!/addEmployee" class="w3-bar-item w3-button" ng-show="temp">Add Employee</a>
     <a ng-href="#!/userData" class="w3-bar-item w3-button" ng-show="temp">List of Employees</a>
     <a ng-href="#!/logout" class="w3-bar-item w3-button" ng-show="temp" ng-click="func()">Logout</a>
    </div>
  </div>

loginCtrl.js

myapp.controller('loginCtrl', ['$scope','myservice','$localStorage','$location',function($scope,myservice,$localStorage,$location) {
   $scope.myobj={};  
   $scope.btns=true;
   $scope.login=()=>{
      myservice.login($scope.myobj).then((response)=>{ //myobj contains email and password
        if(response.responseCode===200){
            alert("Login Successful")
            $scope.btns=false;
            $location.path('/dashBoard');
         }
       },
     (err)=>{
        console.log(err);
      })
    }

当我更新btns的值时,它们仍然在视图上可见。找不到正在发生的事情。我没有使用亲子视图。

plnkr

1 个答案:

答案 0 :(得分:1)

问题

您的问题是同一个控制器的2个实例。让我们看看我们开始时有什么:

console.log($scope.$id);  // --> 2

但是,当我们点击登录链接时,我们会重新创建具有不同ID的新loginCtrl控制器:

console.log($scope.$id);  // --> 6

因此我们的视图绑定到id为2的范围,但我们使用id 6

Demo that demonstrates the issue (See console)

  • <div ng-controller="loginCtrl">
  • 中的第一个实例
  • 第二个实例$routeProvider.when .... controller:'loginCtrl'

解决方案:

因为我们使用loginCtrl作为根控制器 从loginCtrl

中移除$routeProvider控制器
 $routeProvider
  .when('/login',{
    templateUrl:'login.html',
    //controller:'loginCtrl' // we don't need it, it will create new scope
  })

Fixed Demo