使用UI路由器从AngularJS中的根控制器访问范围值

Question

我有一个简单的要求，我需要在index.html页面上显示$scope.resAVal的值。 我在$scope.resAVal中有$scope.resAVal RootCtrl 。

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
  <!--  required js libs and other stuff  -->
  </head>

  <body>
    <h3>{{resAVal}}</h3> <!-- This is what I need to display from RootCtrl -->
    <div ui-view></div>
  </body>

</html>

这是app.js ：

var app = angular.module('plunker', ['ui.router']).

config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
  function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        resolve:{
          resA:  function(){
            return {'value': 'A'};
          }
        },
        views: {

          '': {
            templateUrl: 'home.html',
            controller: 'RootCtrl'

          },

          'A@home': {
            templateUrl: 'a.html',
            controller: 'MainCtrl'
          },

          'B@home': {
            templateUrl: 'b.html',
            controller: 'MainCtrl'
          },
          'C@home': {
            templateUrl: 'c.html',
            controller: 'MainCtrl'
          }
        }

      });
  }
]);

app.controller('RootCtrl', function($scope, resA) {
  $scope.bar = [];
  $scope.resAVal = resA.value;

})
app.controller('MainCtrl', function($scope) {

  var fruits = [{"name": "Apple"}, {"name": "Banana"}, {"name": "Carrot"}];

  $scope.foo = 2;

  $scope.$watch('foo', function(value, oldValue) {
    $scope.bar.length = 0; //correct
    getBar(fruits, value);
  });

  function getBar(fruits, howManyFruits) {
    for (var i = 0; i < $scope.foo; i++) {
      $scope.bar.push(fruits[i]);
    }
  }

});

这是它的plunker。

有人可以帮我吗？

Answer 1

您无法将{{resAVal}}移至home.html视图的任何原因？

<h3>{{resAVal}}</h3>
<div class="row">
  <div ui-view="A"></div>
  <div ui-view="B"></div>
  <div ui-view="C"></div>
</div>

如果你真的不能这样做，你总是可以在root控制器中注入rootScope：

app.controller('RootCtrl', function($scope, $rootScope, resA) {
  $scope.bar = [];
  $scope.resAVal = resA.value;
  $rootScope.resAVal = resA.value;
})

Answer 2

你的问题是$ scope

如果你声明$rootScope.resAVal它工作正常

Plunkr在这里