0

I have several items in my application that depend on others.

Example Nested Selects:

<!-- optionsa is built from ajax -->
<select ng-model="current_optiona" ng-options="a as a.name for a in optionsa"></select>
<!-- optionsb is built when current_optiona change -->
<select ng-model="current_optionb" ng-options="b as b.name for b in optionsb"></select>
<!-- optionsc is built when current_optionb change -->
<select ng-model="current_optionc" ng-options="c as c.name for c in optionsc"></select>

Problem #1 The problem here is that I have to implement the methods and model of each of the select in each of the controllers

Solution P#1 move the methods and model to service

Problem #2 if I wanted to show on one controller the nested select several times, all lists (optionsa, optionsb, optionsc) contain the same

Problem #3 not always are the same three select, can be only two them or mixed with other

Proposed solution constructing a directive for creating independent models for sharing and sub ​​directives that allow choose to select display. the main idea here is one directive watch and popule all lists (optionsa, optionsb and optionsc) the inner directives or selects only the directive scope for get the options and can use ng-model for share with the controller

<filters>
    <select ng-model="current_optiona" ng-options="a as a.name for a in mistery.optionsa"></select>
    <select ng-model="current_optionb" ng-options="b as b.name for b in mistery.optionsb"></select>
</filters>

The Question(s)

with this solution i can use many filters but

  • How i can share models between directives?
  • How i can access to parent directive model (mistery variable) from directive?
  • How i can access (and modify) to controller models from directives?

Update #1

this is a early experience

directive-filter.coffee

app
.directive 'filters' , ->
  restrict: 'E'
  transclude: true
  replace: true
  scope:          # if enable the scope the
    ns: '=model'  # sub directives can access
  template: '<div ng-transclude></div>'
  controller: ($scope, MyAPI) ->
    $scope.ns =
      optionsa: []
      optionsb: []
      optionsc: []
      optiona: {}
      optionb: {}
      optionc: {}

    MyAPI.$watch 'ns.objecta', (values) ->
      $scope.ns.optionsa = values
    MyAPI.$watch 'ns.objectb', (values) ->
      $scope.ns.optionsb = values

    $scope.$watch 'ns.optionsa', (valuea) ->
      MyAPI.get 'objectb', valuea.id

    MyAPI.get 'objecta'

.directive 'optiona', ->
   restrict: 'E'
   require: '^filters'
   templateUrl: 'directive.optiona.html'

.directive 'optionb', ->
   restrict: 'E'
   require: '^filters'
   templateUrl: 'directive.optionb.html'

Templates

<!-- directive.optiona.html -->

<label>Select option a</label>
<select
    ng-model="$parent.ns.optiona"
    ng-options="i as i.name for i in $parent.ns.optionsa">
</select>

<!-- directive.optionb.html -->

<label>Select option a</label>
<select
    ng-model="$parent.ns.optionb"
    ng-options="i as i.name for i in $parent.ns.optionsb">
</select>

Mode of use

<filters>
  <optiona></optiona>
  <optionb></optionb>
</filters>

the previous sample solves all except when i attach a scope to the filters directive the subdirectives stop of work. how i can share the ng-model every subdirective

Example in the main template of my controller

<filters model="myfilter">
  <optiona></optiona>
  <optionb></optionb>
</filters>

How can i make work this?

4

2 回答 2

0

我找到了以下解决方案：通过每个过滤器移动选择选项并使用控制器更新主指令，但有一个缺点，每个过滤器都需要一个model属性，即使不使用它

使用方式

.coffee

for directiveName in ['optiona', 'optionb']    
  do (directiveName)
    .directive 'directiveName', ->
       restrict: 'E'
       require: '^filters'
       templateUrl: 'directive.' + directiveName + '.html'
       scope: { localModel: "=model" }
       controller: ($scope) ->
          $scope.$watch 'localModel', (value) ->
              $scope.$parent.ns[directiveName] = value

templates

<!-- directive.optiona.html -->

<label>Select option a</label>
<select
    ng-model="localModel"
    ng-options="i as i.name for i in $parent.ns.optionsa">
</select>

<!-- directive.optionb.html -->

<label>Select option a</label>
<select
    ng-model="localModel"
    ng-options="i as i.name for i in $parent.ns.optionsb">
</select>
于 2013-09-24T19:30:05.033 回答
-1

解决此问题的一种方法是将数据建模为便于实现您所寻找的格式的数据。

如果您的模型变得分层，您可以在没有指令的情况下实现这一点。模型结构为

$scope.optionsa=[{
                   prop1:"",
                   prop2:"", 
                   optionsb:[{
                              prop1:"",
                              optionc:[{},{}]
                            },{},{}]
                }]

所以你的选择变成

<select ng-model="current_optiona" ng-options="a as a.name for a in optionsa"></select>
<!-- optionsb is built when current_optiona change -->
<select ng-model="current_optionb" ng-options="b as b.name for b in current_optiona.optionsb"></select>
<!-- optionsc is built when current_optionb change -->
<select ng-model="current_optionc" ng-options="c as c.name for c in current_optionb.optionsc"></select>
于 2013-09-24T06:21:47.327 回答