Question

我正在使用ui-boostrap的uib-accordion指令用于AngularJS。我有一个关于将值传递给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

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

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

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

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

最后，在accordion group指令中添加'model'属性，并指定item1作为传递给accordion指令的值：

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

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

这是一个修改了代码的插件。

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

我对修改UI引导程序文件并不十分满意，但我无法想出更好的方法。显然你需要在本地存储自己的文件副本，以便修改它，我建议在文件名中添加.custom来提醒你它已被修改。也可能会弹出一些注释，以便您可以将所做的任何更改迁移到它的未来版本，以防您想要升级。

Answer 2

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

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

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

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

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

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

以下是相应的plunker：https://embed.plnkr.co/ExktoE4RCXFrn6SoYZIR/

注意：它也可以传递一个对象，其中包含一个包含isDisabled所需值（{foo: 'bar',.., isDisabled: true}）的值。然后将此值传递回isDisabled

将uib-accordion范围内的值传递给父范围

2 个答案: