将值从 uib-accordion 范围传递到父范围答案

【问题标题】：Passing value out of uib-accordion scope to the parent scope将值从 uib-accordion 范围传递到父范围
【发布时间】：2016-03-31 14:25:12
【问题描述】：

我正在为 AngularJS 使用来自 ui-boostrap 的 uib-accordion 指令。我有一个关于从嵌入指令 uib-accordion-group 传递值的问题。

当在手风琴内简单地将一个变量设置为 ng-model 时，它将附加到手风琴作用域，而不是父主作用域，尽管由于 transclude 指令它看起来像是在主作用域中。

为了将手风琴内部的值传递给主范围，我需要执行类似ng-model="$parent.$parent.$parent.data2 之类的操作，这似乎是错误的。

有没有办法优雅地做到这一点？

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function($scope) {

});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AccordionDemoCtrl">
    <script type="text/ng-template" id="group-template.html">
      <div class="panel {{panelClass || 'panel-default'}}">
        <div class="panel-heading">
          <h4 class="panel-title" style="color:#fa39c3">
          <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span
            ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
        </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
          <div class="panel-body" style="text-align: right" ng-transclude></div>
        </div>
      </div>
    </script>


    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group heading="Static Header, initially expanded" is-open="true">
        <div>
          Simple data model
          <input type="text" ng-model="data" />Anti-pattern data2 model
          <input type="text" ng-model="$parent.$parent.$parent.data2" />
        </div>
        <div>
          I read "{{data}}" inside the accordion
        </div>
        <div>
          I read "{{data2}}" inside the accordion
        </div>
      </uib-accordion-group>
    </uib-accordion>
    <div>
      How do I read "{{data}}" OUTSIDE the accordion
    </div>
    <div>
      Data2 seems fine "{{data2}}" OUTSIDE the accordion
    </div>

  </div>
</body>

</html>

【问题讨论】：

标签： javascript angularjs accordion angular-ui-bootstrap

【解决方案1】：

我最近遇到了一个相关问题，我最终修改了 ui-bootstrap-tpls-0.14.3.js 文件。在第 239 行，您可以看到我在手风琴指令的范围对象中添加了一个名为“模型”的属性。

scope: {
  heading: '@',               // Interpolate the heading attribute onto this scope
  isOpen: '=?',
  isDisabled: '=?',
  model: '='                   // Custom property added
},

然后在控制器中，我将一个名为 item1 的对象添加到控制器的作用域中，并为其赋予一个名为 name 的属性：

$scope.item1 = {
  name: 'test1'
};

最后，在手风琴组指令中添加一个“模型”属性，并指定 item1 作为要传递给手风琴指令的值：

<uib-accordion-group model="item1" heading="Static Header, initially expanded" is-open="true">

您现在应该能够在手风琴中设置对象的属性值以及在指令之外访问它们。

这是一个你的代码修改后的工作。

http://plnkr.co/edit/44x8pH?p=preview

我对修改 UI 引导文件不太满意，但我想不出更好的方法来做到这一点。显然，您需要将自己的文件副本存储在本地，以便您可以修改它，我建议在文件名中添加 .custom 以提醒您它已被修改。可能还会弹出一些 cmets，以便您可以将所做的任何更改迁移到它的未来版本，以备不时之需。

【讨论】：

我确信这是指令必须公开一个 api 供父级访问指令内的变量的唯一方法。谢谢。
没问题，很高兴它有帮助。
@Chris，有没有一种方法可以覆盖指令而不是更改 ui-bootstrap.js 文件？

【解决方案2】：

我知道这可能很晚了，而且有点目的，但我遇到了类似的问题：我有一个值可以传递给模板。受 Chris 回答的启发，我发现了一个 不会更改 uib 文件的 hack：

我传递了我想要 ng-disable 的值，我将其用作临时变量。

<div uib-accordion-group ... is-disabled="color">

然后在我的手风琴模板中，我把 isDisabled 放回它的默认 false 值。

<div class="panel-heading" ng-init="color = isDisabled; isDisabled = false">

在此之后，您可以在模板中的任何位置使用 color 角度变量。

这里是对应的插件：https://embed.plnkr.co/ExktoE4RCXFrn6SoYZIR/

注意：传递一个包含 isDisabled 所需值 ({foo: 'bar',.., isDisabled: true}) 的值的对象也可能有效。然后你把这个值传回 isDisabled

【讨论】：

嘿downvoter，你能解释一下吗？因此，我将能够更新我的答案。