Question

我有一个包含导航栏的父视图，在该视图中我有一个subscription_status_id元素，它可以呈现我正在使用的任何子视图。

我想根据子视图的路径有条件地显示/隐藏父视图中的导航栏。现在，我有这个：

subscriptions

第一次加载我的应用时，<div ui-view>设置为true，这可以按预期工作。

将<nav ng-show="!vm.hideNavbar">更改为false后，不会更新绑定值。它仍然是vm.hideNavbar。

我的应用中的每个控制器都扩展了vm.hideNavbar：

true

因此，每次加载新控制器时，它都会调用BaseController的构造函数并有条件地设置export class BaseController { public hideNavbar: boolean; constructor(public $scope: IBaseScope, private $state: ng.ui.IStateService) { if ($state.current.url === '/login') { this.hideNavbar = true; } else { this.hideNavbar = false; } $scope.vm = this; } }。如果我在此构造函数的末尾立即运行BaseController，则会抛出错误，指出摘要周期已在运行。

因此，正在运行摘要周期，但我的视图中的值未更新。我唯一的想法是，我已经实例化了$scope.vm.hideNavbar的多个副本，因为我的初始控制器和导航到的控制器都扩展了这个控制器。所以，现在，$scope.$apply()的绑定值仍在查看旧控制器。

我是否在正确的轨道上？我该如何解决这个问题？

Answer 1

在这种情况下，我建议使用 view inheritance （不是controller，而不是state）。在这里查看更多详细信息：

有a working example

我们需要的是'root'州。它将是任何其他state （州家庭）的超级父母。这可能是州定义：

$stateProvider
  .state('root', {
      abstract: true,
      templateUrl: 'layout.tpl.html',
      controller: MyNamespace.RootCtrl,
  })

  .state('login', {
      parent: "root",
      url: "/login",
      templateUrl: 'tpl.html',
      controller: MyNamespace.LoginCtrl,
  })
  .state('home', {
      parent: "root",
      url: "/home",
      templateUrl: 'tpl.html',
      controller: MyNamespace.HomeCtrl,
  })

甚至其他一些状态层次结构也将从'root'状态开始：

$stateProvider
  .state('parent', {
      parent: "root",
      url: "/parent",
      templateUrl: 'tpl.html',
      controller: MyNamespace.ParentCtrl
  })
  .state('parent.child1', { 
      url: "/child1",
      templateUrl: 'tpl.html',
      controller: MyNamespace.Child1Ctrl
  })
  .state('parent.child2', { 
      url: "/child2",
      templateUrl: 'tpl.html',
      controller: MyNamespace.Child2Ctrl
  })

我们可以看到很多 controllers:... 被定义，在这里它们是：

module MyNamespace {
    // the real SUPER parent of all states
    // but it is about VIEW inheritance (its $scope)
    // not about controller hierarchy
    export class RootCtrl extends BaseController {
    }

    export class HomeCtrl extends BaseController {
    }
    export class LoginCtrl extends BaseController {
    }
    export class ParentCtrl extends BaseController {
    }
    export class Child1Ctrl extends BaseController {
    }
    export class Child2Ctrl extends BaseController {
    }
}

如片段注释中所述 - 存在继承，但仅限于代码级别。传递的$scope由视图层次结构继承。

视图层次结构中的第一个控制器是RootCtrl，它实际上是唯一的，将分配（创建）共享参考模型 rootSetting : {}

它们都来自这一个控制器基础：

module MyNamespace {
    export interface IRootSetting {
        hideNavbar: boolean;
    }
    export interface IMyRootScope extends ng.IScope {
        rootSetting: IRootSetting
    } 
    export interface IBaseScope extends IMyRootScope {

    }
    export class BaseController {
        public hideNavbar: boolean;
        static $inject = ['$scope', '$state'];

        constructor(public $scope: IBaseScope, 
                 protected $state: ng.ui.IStateService) {

                  // will be in fact assigned in the RootCtrl only
                  // all others (children) will get that reference
                  // via scope inheritance
                  $scope.rootSetting = $scope.rootSetting || {hideNavbar: false}; 

            if ($state.current.url === '/login') {
                this.$scope.rootSetting.hideNavbar = true;
            } else {
                this.$scope.rootSetting.hideNavbar = false;
            }
        }
    }
}

使用此根模板实现该目标：

<div>      
  <div ng-if="!rootSetting.hideNavbar"> 
   ... // navbar
  </div>      

  <div ui-view="">
      // standard content of child views
  </div>      
</div>

我们可以看到，在这里我们评估共享参考模型 rootSetting 及其属性hideNavbar

view inheritance 与UI-Router一起出现的真正优势。

检查行动here

正在运行Angular Digest循环但ng-bind值未更新

1 个答案:

有a working example