Question

我在ng-view之外加载了一个部分模板，它有自己的控制器。它看起来像这样。

基本模板

<html ng-app="myApp">
   ...
   <div ng-include src="'myPartial.html'"></div>
   ...
   <div ng-view></div>
   ...
   <!-- script files go here -->
   <script src="angular.js"></script>
   <script src="angular-route.js"></script>
   <script src="myPartialController.js"></script>
   <script src="myApp.js"></script>
</html>

主要应用脚本（myApp.js）

var app = angular.module('myApp', ['myPartialController', 'ngRoute']);
app.config(function($routeProvider) {
    .when('/myUrl', {
            templateUrl: 'myPartial.html',
            controller:'myPartialController',
            reloadOnSearch: true
        })
});

部分模板（myPartial.html）

<div class="container-fluid" ng-controller="myPartialController">
    {{myVariable}}
</div>

现在，在控制器内部，我正在从sessionStorage读取一个值，进行一堆解析，数据操作等，然后最终将结果设置为$scope数组变量。

部分控制器（myPartialController.js）

angular.module('myPartialController', [])

.controller('myPartialController', ['$scope', '$rootScope', '$window', function($scope, $rootScope, $window) {
    // some parsing, data manipulation, what have you's
    // and finally set the result array to myVariable.
    $scope.myVariable = myVariable;
}]);

现在加载部分时，它只显示一个空数组（[]）。刷新页面时，会显示正确的数组。

基本上，双向绑定不起作用。我错过了什么？

Answer 1

假设myVariable在异步/回调函数之后获取值并且它确实具有该点的预期值，Angular在到达下一个范围摘要周期之前不知道该更改。

但是，您可以通过执行$scope.$apply()或将分配行包装在$timeout回调中来强制执行。

在这个简单的例子中看到我的意思：

＆＃13;

angular.module('a', [])
  .controller('Ctrl', function($scope) {

    $scope.valA = $scope.valB = 'not set yet';

    setTimeout(function() { // simulated async call
      $scope.valA = 'first one set';
      $scope.$apply();
      $scope.valB = 'second one set'; // this one will wait another cycle
    }, 500)
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="a" ng-controller="Ctrl">
  <p>{{valA}}</p>
  <p>{{valB}}</p>
  <p><button ng-click="">Force Digest</button>
</div>

＆＃13;

部分模板中的AngularJS双向绑定＆amp;刷新困境

1 个答案: