在uiRouter中更改父控制器属性与子状态

时间:2017-01-26 00:21:04

标签: angularjs angular-ui-router

我正在重构一个Angular 1.5应用程序,而我正试图在不拆分整个应用程序的情况下解决问题。

我的问题是这个;我有一个带有属性的父状态控制器。子状态模板包含需要更新父状态属性的组件。

我的州设置如下:

$stateProvider
  .state('parent', {
    abstract: true,
    component: 'parentComponent'
  })
  .state('parent.child', {
    url: '/child',
    component: 'childComponent'
  })

子组件有一个模板,其中包含它自己的组件,它将控制器方法指定为回调:

 <grand-child on-change="$ctrl.doSomething()"></grand-child>

我希望该回调更改父控制器上的属性。

我可以在父控制器中执行类似注入$ scope的操作,然后将该属性添加到scope对象并使用范围继承来更改子属性,但是我试图从项目中删除$ scope,而不是添加更多。有没有其他方法可以更新父控制器?

1 个答案:

答案 0 :(得分:2)

在这样一个链式的场景中,

我建议您将该物业存放在服务中

(function () {
    'use strict';

    angular
        .module('app')
        .service('MyService', MyService);

    MyService.$inject = [];

    /* @ngInject */
    function MyService() {



        this.myProperty = ''; // some default value if exists
    }
})();

在您的祖儿组件的控制器中注入MyService然后

doSomething() {

  this.MyService.myProperty = 'some new value';
}

在您的父组件的控制器中注入MyService然后

$onInit() {

  this.myProperty = this.MyService.myProperty;
}