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

Question

我正在为 AngularJS 使用 ui-boostrap 中的 uib-accordion 指令。我有一个关于从 transcluded 指令中传递值的问题，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>

Answer 1

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

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

然后在控制器中，我将一个名为 item1 的对象添加到控制器的作用域中，并给它一个名为 name:

的属性

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

最后，向手风琴组指令添加一个 'model' 属性，并将 item1 指定为传递给手风琴指令的值：

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

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

这是一个经过修改后可以正常工作的代码。

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

我对修改 UI bootstrap 文件不是很满意，但我想不出更好的方法。显然，您需要在本地存储自己的文件副本，以便您可以对其进行修改，我建议将 .custom 添加到文件名中以提醒您它已被修改。可能还会弹出一些评论，以便您可以将所做的任何更改迁移到它的未来版本，以防您想要升级。

Answer 2

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

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

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

然后在手风琴模板中，我将 isDisabled 恢复为默认的 false 值。

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

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

这是相应的plunker : https://embed.plnkr.co/ExktoE4RCXFrn6SoYZIR/

注意：它也可以传递一个对象，其中您的值包含 isDisabled 想要的值 ({foo: 'bar',.., isDisabled: true})。然后你将这个值传递回 isDisabled

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

Passing value out of uib-accordion scope to the parent scope

javascript

accordion

angularjs

angular-ui-bootstrap