將值從uib-手風琴范圍傳遞到父范圍

Question

我正在使用ui-boostrap的uib-accordion指令用於AngularJS。 我有一個關於將價值傳遞給被超越的指令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行上，您可以看到我已經向手風琴指令的作用域對象添加了一個名為“模型”的屬性。

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=預覽

我對修改UI引導程序文件並不滿意，但是我無法提出更好的方法。 顯然，您需要將自己的文件副本存儲在本地，以便您可以對其進行修改，並且我建議在文件名中添加.custom，以提醒您文件已被修改。 可能還會彈出一些注釋，以便您將所做的任何更改遷移到將來的版本中，以備將來升級。

Answer 2

我知道可能已經很晚了，有一點目標，但是我遇到了一個類似的問題：我有一個值可以傳遞給模板。 受克里斯答案的啟發，我發現了一個不會更改uib文件的黑客：

我將要用作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} ） {foo: 'bar',.., isDisabled: true} 。 然后您將此值傳遞回isDisabled

將值從uib-手風琴范圍傳遞到父范圍

問題描述

2 個解決方案

解決方案1
3 已采納 2015-12-25 23:33:58

解決方案2
-1 2016-10-31 08:08:14

將值從uib-手風琴范圍傳遞到父范圍

問題描述

2 個解決方案

解決方案1 3 已采納 2015-12-25 23:33:58

解決方案2 -1 2016-10-31 08:08:14

解決方案1
3 已采納 2015-12-25 23:33:58

解決方案2
-1 2016-10-31 08:08:14