AngularJS指令未随父范围变量更改而更新

我的AngularJS应用程序中有一个指令和一个控制器，如下所示，我需要用控制器范围变量的更改来更新该指令

我面临的问题是，对控制器范围变量的任何更改都不会更新指令。我尝试过使用{scope:false}，尝试过创建一个独立的作用域，并与控制器作用域变量进行单向绑定，如下所示，但没有一个有效，所以请有人检查我的代码，并告诉我这里缺少了什么/做错了什么？谢谢

在指令中使用隔离范围的首次试验

.directive('loginPanelDir', function() {
 return {
    restrict: 'A',
    scope: {
       loginStatus: "&userLoginStatus"
    },
    link: function(scope, element, attrs) {            

        console.log(scope.loginStatus()); //will always print 0 despite of changes to the scope var in controller            
    }

 };
});

.controller('LoginController', function ($scope, $location) {       
    $scope.LoginStatus = "0";

    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };

});

<div id="login" login-panel-dir user-login-status="LoginStatus">
<button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>

.directive('loginPanelDir', function() {
 return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {            

        console.log(scope.LoginStatus()); //will always print 0 despite of changes to the scope var in controller         

    scope.$watch(function(){ scope.LoginStatus }, function(){
        console.log('Login status  : '+scope.LoginStatus);  //will always return 0...          
    });

    }

 };
});

.controller('LoginController', function ($scope, $location) {       
    $scope.LoginStatus = "0";
    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };

});

<div id="login" login-panel-dir>
<button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>

.directive（'loginPanelDir'，function（）{
返回{
限制：“A”，
范围：{
loginStatus:“&userLoginStatus”
},
链接：函数（作用域、元素、属性）{
console.log（scope.loginStatus（））；//将始终打印0，尽管控制器中的scope变量发生了更改
}
};
});
.controller（'LoginController'，函数（$scope，$location）{
$scope.LoginStatus=“0”；
$scope.clickMe=函数（）{
$scope.LoginStatus=“1”；
};
});
登录

在指令中使用{scope:false}进行第二次试验

.directive('loginPanelDir', function() {
 return {
    restrict: 'A',
    scope: {
       loginStatus: "&userLoginStatus"
    },
    link: function(scope, element, attrs) {            

        console.log(scope.loginStatus()); //will always print 0 despite of changes to the scope var in controller            
    }

 };
});

.controller('LoginController', function ($scope, $location) {       
    $scope.LoginStatus = "0";

    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };

});

<div id="login" login-panel-dir user-login-status="LoginStatus">
<button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>

.directive('loginPanelDir', function() {
 return {
    restrict: 'A',
    scope: false,
    link: function(scope, element, attrs) {            

        console.log(scope.LoginStatus()); //will always print 0 despite of changes to the scope var in controller         

    scope.$watch(function(){ scope.LoginStatus }, function(){
        console.log('Login status  : '+scope.LoginStatus);  //will always return 0...          
    });

    }

 };
});

.controller('LoginController', function ($scope, $location) {       
    $scope.LoginStatus = "0";
    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };

});

<div id="login" login-panel-dir>
<button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>

.directive（'loginPanelDir'，function（）{
返回{
限制：“A”，
范围：假，
链接：函数（作用域、元素、属性）{
console.log（scope.LoginStatus（））；//将始终打印0，尽管控制器中的scope变量发生了更改
scope.$watch（函数（）{scope.LoginStatus}，函数（）{
console.log（'Login status:'+scope.LoginStatus）；//将始终返回0。。。
});
}
};
});
.controller（'LoginController'，函数（$scope，$location）{
$scope.LoginStatus=“0”；
$scope.clickMe=函数（）{
$scope.LoginStatus=“1”；
};
});
登录

。 使用

$timeout

而不是

setTimeout

：

 setTimeout(function(){
       $scope.LoginStatus = "1";
    }, 3000); 

应该是：

 $timeout(function(){
       $scope.LoginStatus = "1";
    }, 3000);   

scope.$watch("LoginStatus", function(){
    console.log('Login status  : '+scope.LoginStatus);  //will always return 0...          
});

setTimeout

是本机Javascript，因此它不会运行摘要，也不会收到更改通知，因此不会更新绑定，

$timeout

在完成时运行摘要，强制更新绑定

嗯，刚刚意识到你的

$watch

也错了： 应该是：

 $timeout(function(){
       $scope.LoginStatus = "1";
    }, 3000);   

scope.$watch("LoginStatus", function(){
    console.log('Login status  : '+scope.LoginStatus);  //will always return 0...          
});

---

您不必使用

$timeouts

或

$interval

来监视某些范围值的更改。在指令中，您可以通过查看

用户登录状态

属性来查看登录状态的变化

大概是这样的：

JAVASCRIPT

  .controller('LoginController', function($scope) {
    $scope.LoginStatus = "0";

    $scope.clickMe = function(){
       $scope.LoginStatus = "1";
    };
  })

  .directive('loginPanelDir', function() {
    return function(scope, elem, attr) {
      scope.$watch(attr.userLoginStatus, function(value) {
        console.log(value);
      });
    }
  });

HTML

<div id="login" login-panel-dir user-login-status="LoginStatus">
  <button id="btnLogin" type="submit" ng-click="clickMe()">Login</button>
</div>

登录

我正在使用&因为我正在进行单向绑定。这个问题根本与超时无关，即使我以任何方式更改变量，它仍然不会再次更新指令。它与setTimeout无关。即使我完全删除了setTimeout并尝试在单击按钮时更改控制器中的变量，它也不会更新指令。您是否尝试过我关于将其传递到指令的其他建议？请先阅读更新问题。是的，我已经尝试了你所建议的一切，我可以向你保证不会work@MohammadSepahvand在使用

$timeout

方面是正确的。无论您的

setTimeout

实例是否有效，您都应该养成使用角度选项的习惯（如果它们可用）。最终它会赶上你，因为angular独立编译和存储所有内容。