如何在angularjs ui-router中的状态之间共享$ scope数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (59)

如果不在父控制器中使用服务或构造监视程序,那么如何才能让子状态访问主控制器的$scope

      .state("main", {
          controller:'mainController',
          url:"/main",
          templateUrl: "main_init.html"
      })  
      .state("main.1", {
          controller:'mainController',
          parent: 'main',
          url:"/1",
          templateUrl: 'form_1.html'
      })  
      .state("main.2", {
          controller:'mainController',
          parent: 'main',
          url: "/2",
          templateUrl: 'form_2.html'
      })  

我无法以子状态访问mainController作用域。

提问于
用户回答回答于

状态定义不变:

$stateProvider
    // States
 .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })  

如果我们导航到状态'main.2'它将被实例化两次。

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

理解Scopes

在AngularJS中,子作用域通常是从其父作用域继承的。在你的模型中有一个“.”将确保原型继承正在发挥作用。

// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

就这样了。我们从UI-Router视图和角度范围,因为我们巧妙地使用了引用类型(Model),即确实有'.'点入ng-model定义-我们现在可以共享数据

用户回答回答于

你可以通过$rootScope获得整个范围。如果只需要示波器的一部分,则ui-router具有自定义数据功能。

以下是如何执行多步骤表单。我需要这些路线来包含有关他们在流程中的步骤的信息。

  // Sign UP routes
  .state('sign-up', {
    abstract: true,
    url: '/sign-up',
    controller: 'SignupController',
    templateUrl: 'sign-up/index.html',
  })
  .state('sign-up.start', {
    url: '-start',
    templateUrl: 'sign-up/sign-up.start.html',
    data: { step: 0, title: 'Welcome to Mars!', },
  })
  .state('sign-up.expertise', {
    url: '-expertise',
    templateUrl: 'sign-up/sign-up.expertise.html',
    data: { step: 1, title: 'Your Expertise'},
  })

SignupController.js

angular.module('app').controller('SignupController', function($scope, $state) {
  $scope.state = $state;
});

在这里,我们得到了ui-router的$state并将其打开$scope

这里是主要的模板'sign-up / index.html',:

<h2>{{state.current.data.title}}</h2>

<div>This is a multi-step-progress control {{state.current.data.step}}</div>

<form id="signUpForm" name="signUpForm" novalidate>
  <div ui-view></div>
</form>

子模板可以是他们喜欢的。

扫码关注云+社区

领取腾讯云代金券