繁体   English   中英

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

Accessing scoped value from a Root Controller in AngularJS with UI Router

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个简单的要求,我需要在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。

有人可以帮我吗?

2 个回复

您无法将{{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;
})

你的问题是$ scope

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

Plunkr在这里

1 在控制器中访问UI路由器解析

我继续发现很棒的ui路由器。 我现在专注于resolve()函数。 我有一个基本的$state ,在这里我从后端解析一个query()。 我正在尝试在State1Ctrl访问myObjects : 我希望在控制台中看到myMobject列表打印。 可悲的是,这里是输出: ...

9 使用ui路由器进行范围和控制器实例化

我很困惑控制器何时实例化。 此外,嵌套状态时控制器如何实例化。 我可能会对范围如何附加到视图和控制器感到困惑,也就是说,如果每个视图都有自己的控制器和范围,或者它们共享相同的范围。 有人可以解释控制器何时实例化? 在嵌套路由下,所有视图共享一个控制器和范围吗? 当我切换状态并返回状 ...

10 AngularJS:控制器使用UI路由器更改状态时多次注册

我将带有ui视图的HTML注入DOM,然后使用ui.router更改状态。 每次状态更改时,该控制器似乎都会被注册一次,因此控制器中的代码将多次执行。 您可以在下面的plnkr中看到此演示。 (只需弹出打开控制台,然后在左右按钮之间来回单击,请注意,控制器每次单击都会花费额外的时间。) ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM