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>

作用域继承通常是很直接的... 直到需要双向数据绑定。如果您尝试从子作用域内部绑定到父作用域中的基元（例如，数字，字符串，布尔值）。它不能像大多数人期望的那样工作。子作用域具有自己的属性，该属性隐藏/阴影相同名称的父属性。

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

有关更多信息，请参见

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

消息关闭后将不再显示

1 个答案: