Angularjs 范围变量在模板中不可用

我用角形种子开始了一个项目。我将它与另一个包含jQuery的项目混合在一起。我无法访问模板中的范围变量

JS:

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', function ($scope) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    $.when(dbReadyDeferred).then(function() {
        $scope.proBlock = true;
        console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
    });
...

<div ng-show="showView">
    {{proBlock}}
</div>

HTML:

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', function ($scope) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    $.when(dbReadyDeferred).then(function() {
        $scope.proBlock = true;
        console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
    });
...

<div ng-show="showView">
    {{proBlock}}
</div>

{{proBlock}}

在浏览器中，它显示：

false

。我的代码有问题吗

---

谢谢

如果您确信您的函数

$。当（dbreadydeerred）。然后调用（function（）{}）

时，请按如下方式更改控制器代码：

.controller('View1Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    $.when(dbReadyDeferred).then(function() {
        $timeout(function() {
             $scope.proBlock = true;
             console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
        });
    });
}]);

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'.
    resolve: {
         dbState: ['$rootScope', '$q', function($rootScope, $q) {
               var promise = $q.when(dbReadyDeferred)

               promise.then(function() {
                   $rootScope.$broadcast("dbStateReady");
               });
               return promise;
         }]
    }
  });
}])

.controller('View1Ctrl', ['$scope', function ($scope) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    var deregisterFunction = $scope.$on("dbStateReady", function() {
        $scope.proBlock = true;
        console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
        deregisterFunction();   // Remove this watch for $on listener
    });
});

因为，您正在使用jQuery更改

$scope.proBlock

值，所以Angular不知道此更改，我们需要显式地告诉Angular运行摘要循环

我们也可以使用

$scope.$apply（）

，但是将调用包装到

$timeout

函数中是一种更干净的方法

阅读更多：

更新：

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', function ($scope) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    $.when(dbReadyDeferred).then(function() {
        $scope.proBlock = true;
        console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
    });
...

<div ng-show="showView">
    {{proBlock}}
</div>

您可以按如下方式修改resolve变量：

.controller('View1Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    $.when(dbReadyDeferred).then(function() {
        $timeout(function() {
             $scope.proBlock = true;
             console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
        });
    });
}]);

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'.
    resolve: {
         dbState: ['$rootScope', '$q', function($rootScope, $q) {
               var promise = $q.when(dbReadyDeferred)

               promise.then(function() {
                   $rootScope.$broadcast("dbStateReady");
               });
               return promise;
         }]
    }
  });
}])

.controller('View1Ctrl', ['$scope', function ($scope) {

    $scope.showView = true;
    $scope.proBlock = false;
    $scope.modelBlock = false;

    var deregisterFunction = $scope.$on("dbStateReady", function() {
        $scope.proBlock = true;
        console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
        deregisterFunction();   // Remove this watch for $on listener
    });
});

---

基本上，我们将

$q.when

（如提到的@shushanthp）移动到

解析
，并使用
$broadcast
了解db状态何时准备就绪，使用
$on
就像使用
$一样。当
超出角度世界时，您必须明确使用
$timeout
或
$scope.$digest

您可以使用AngularJS的promise库，它是
$q.when
方法，因为AngularJS将手表连接到它并相应地更改

 $q.when(dbReadyDeferred).then(function() {
      $scope.proBlock = true;
      console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
 });

如果要使用
jQuery.when
方法，则使用
$timeout
如下：

$.when(dbReadyDeferred).then(function() {
     $timeout(function() {
         $scope.proBlock = true;
        console.log('dbReadyDeferred.state()',dbReadyDeferred.state());
       },0,false) // false it doesnt invoke digest again which helps in performance

    });

直接显示为false或div本身不显示？好的，非常感谢，
$q.when
工作正常。您知道如何将此信息传递给路由提供商的
解决方法吗？好的，非常感谢。是否有方法使此操作更简洁，并将延迟变量传递给$routeProvider的
resolve
属性？我在这里贴了一个问题：谢谢。但是我不认为监视广播事件“dbstateredy”有什么意义，因为控制器的代码只有在
dbReadyDeferred
解决后才会执行，对吗？所以
dbStateReady
必须触发一个控制器的代码开始执行，不是吗？你完全正确。您应该注意提高代码的性能。我已经更新了答案。非常感谢你的帮助！