消息关闭后不会再次显示

Question

用户可以点击帮助图标来显示帮助信息。如果用户单击消息中的关闭图标，它将关闭。这可以无限期地重复。

如果帮助图标和带有关闭图标的消息都在 ng-controller 中，则此方法有效。

但是，如果帮助图标在外面而消息在里面（见下文），那么我可以显示和关闭帮助消息，但如果我再次尝试显示它，它就不起作用了。

我错过了什么？

<div ui-content-for="title">
  <span>Page Title</span>
  <span>
    <i ng-click="isHelpVisible = true;" class="fa fa-question-circle">
    </i>
  </span>
</div>

<div ng-controller="InventoryController as inventory">
  <div class="scrollable">
    <div ng-show="isHelpVisible" class="alert alert-info alert-dismissible">
        <a class="close" ng-click="isHelpVisible = false;"
           aria-label="close" data-dismiss="alert">&times;</a>
        Help message is here.
    </div>
  </div>
</div>

Answer 1

这是一个数据隐藏问题，由 ng-controller 指令创建子作用域引起。

不是直接设置作用域属性，而是在父作用域上设置对象的属性。

<div ui-content-for="title">
  <span>Page Title</span>
  <span><i ng-click="help={isHelpVisible: true}" class="fa fa-question-circle"></i></span>
</div>

<div ng-controller="InventoryController as inventory">
  <div class="scrollable">
    <div ng-show="help.isHelpVisible" class="alert alert-info alert-dismissible">
        <a class="close" ng-click="help.isHelpVisible=false;"
           aria-label="close" data-dismiss="alert">&times;</a>
        Help message is here.
    </div>
  </div>
</div>

作用域继承通常很简单...直到您需要双向数据绑定。如果您尝试从子作用域内绑定到父作用域中的原语（例如，数字、字符串、布尔值）。它并不像大多数人期望的那样工作。子作用域有自己的属性，hides/shadows 父作用域属性同名。

您的解决方法是在父模型中定义对象，然后在子模型中引用该对象的属性。

有关详细信息，请参阅

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

消息关闭后不会再次显示

Message won't display a second time after being closed

javascript

angularjs

ng-controller