Question

我用棱角种子开始了一个项目。我把它与另一个有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());
    });
...

HTML：

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

在浏览器中，它显示：false。我的代码有问题吗？

由于

Answer 1

当您在Angular世界中使用$.when时，您必须明确使用$timeout或$scope.$digest。

您可以使用Angular的承诺库$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

    });

Answer 2

如果您确定正在调用您的函数SortDirection，请更改您的控制器代码：

ItemSource

因为，您正在使用jQuery更改$.when(dbReadyDeferred).then(function() {})值，因此Angular不知道此更改，我们需要明确告诉Angular运行摘要周期。

我们也可以使用.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()); }); }); }]);，但将调用包含在$scope.proBlock函数中是一种更简洁的方法。

了解详情：AngularJS with Ajax Form submission needing to click twice

<强>更新

您可以像这样修改您的解决变量：

$scope.$apply()

基本上，我们将$timeout（如提及的@shushanthp）移动到.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来了解使用resolve准备好db状态的时间。< / p>

范围变量在模板中不可用

2 个答案: