为什么我的 ng-hide / show 不能与我的 ng-click 一起使用？

Question

我想显示包含 displayCategory.name 的元素，并在其上方单击 ng-click，但它没有按预期工作。

.divider-row
      .row-border(ng-hide="showMe")
        .row.row-format
          .col-xs-12.top-label
            Find where you stand
        %hr.profile
        .row.labelRow
          .col-xs-12
            %ul
              %li(ng-repeat='category in service.categories')
                .clear.btn.Category(ng-click='thisCategory(category) ; showMe = true') {{category.name}}

      .divider-row
      .row-border(ng-show="showMe")
        .row.row-format
          .col-sm-12.col-md-12.top-label.nopadLeft
            What do you think about {{displayCategory.name}}

Answer 1

我把你的 haml 放入转换器中，结果是这样的（显然不正确）：

<div class="divider-row">
  <div class="row-border">(ng-hide="showMe")
    <div class="row row-format">
      <div class="col-xs-12 top-label">
        Find where you stand
      </div>
    </div>
    <hr class="profile"/>
    <div class="row labelRow">
      <div class="col-xs-12">
        <ul>
          <li>(ng-repeat='category in service.categories')
            <div class="clear btn Category">(ng-click='thisCategory(category) ; showMe = true') {{category.name}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="divider-row"></div>
  <div class="row-border">(ng-show="showMe")
    <div class="row row-format">
      <div class="col-sm-12 col-md-12 top-label nopadLeft">
        What do you think about {{displayCategory.name}}
      </div>
    </div>
  </div>
</div>

所以在快速谷歌搜索后我发现你应该这样写：

.divider-row
  .row-border{"ng-hide" => "showMe"}
    .row.row-format
      .col-xs-12.top-label
        Find where you stand...

因为这将转换为您需要的：

<div class="divider-row">
  <div class="row-border" ng-hide="showMe">
    <div class="row row-format">
      <div class="col-xs-12 top-label">
        Find where you stand

对属性使用花括号而不是圆括号

Answer 2

我无法运行你的代码来验证，但我认为问题在于绑定属性 showMe 应该替换为像 status.showMe 这样的对象。

例如，在 ng-repeat 之外定义 $scope.status = { showMe: false};（可能在您的控制器中）。

请查看工作演示：http://jsfiddle.net/jx854d3y/1/

说明：

ng-repeat 为每个项目创建一个子范围。子作用域原型继承自父作用域。在您的情况下，原语 showMe 被分配给子范围。当您在之外 ng-repeat 使用它时，它会尝试从父作用域获取值，即 undefined。这就是它不起作用的原因。

基本规则是：始终使用 Object，而不是原始类型进行绑定。

更多详情请参考：https://github.com/angular/angular.js/wiki/Understanding-Scopes

为什么我的 ng-hide / show 不能与我的 ng-click 一起使用？

Why is my ng-hide / show not working with my ng-click?

angularjs

ng-show