Question

我的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>

在指令

中使用{scope：false}进行第二次试验

.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>

Answer 1

您不必使用$timeouts或$intervals来观看某些范围值的更改。在您的指令中，您可以通过观看user-login-status属性来查看登录状态的变化。

<强> DEMO

这样的事情：

<强> 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>

Answer 2

Working plunk。使用$timeout而不是setTimeout：

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

应该是：

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

setTimeout是本机Javascript，因此它不会运行摘要，并且不会通知角度因此没有更新绑定，$timeout在完成时运行摘要，强制更新绑定。

好its working here，刚刚意识到你的$watch也是错误的：它应该是：

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

AngularJS指令未使用父作用域变量更新进行更新

2 个答案: