Question

我有一个下拉指令，其中包含一个在下拉列表中设置活动项目的功能：

angular.module('clientApp')
  .directive('customDropDown', function ($filter, calculationsFactory) {
    return {
      templateUrl: 'template/custom-drop-down/custom-drop-down.html',
      restrict: 'E',
      scope: {
        resources: '=',
        activeResource: '=',
      },
      link: function postLink(scope) {
        scope.setActiveResource = function(resource){
          scope.activeResource = resource;
        };

      }
    };
  });

标记：

  <custom-drop-down resources="medias" active-resource="activeMedia"></custom-drop-down>

DirectiveTemplate：

<div class="btn-group" dropdown>
  <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle style="width:100%;" ng-click="$event.stopPropagation()">
    {{activeResource.title}} <span class="caret pull-right" style="margin-top:8px;"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="resource in filtredResources"
        ng-click="setActiveResource(resource)"
        ng-class="{active: resource === activeResource}">
      <a href>{{resource.title}}</a>
    </li>
  </ul>
</div>

问题是该功能不是双向绑定＆＃34; activeMedia＆＃34;在这种情况下。它没有得到更新。

我试图在jsfiddle中复制这个案例，但它有效。我可能错过了什么？

更新

我已经确定了这个问题。我的指令放在ui-bootstrap的手风琴指令中：

 <accordion>
    <accordion-group heading="Resources" is-open="true">
       <custom-drop-down resources="medias" active-resource="activeMedia"></custom-drop-down>
    </accordion-group>
 </accordion>

如果我将指令移出手风琴指令，它就可以了。所以手风琴指令不知何故干扰了我的指令。可以解决而无需修改ui-bootstrap的代码？

Answer 1

在您的情况下，这是一个范围问题，正如here所述。

对于angular-bootstrap控件中的元素，您需要使用$parent.作为范围变量的前缀。

<accordion>
    <accordion-group heading="Resources" is-open="true">
       <custom-drop-down resources="$parent.medias" active-resource="$parent.activeMedia"></custom-drop-down>
    </accordion-group>
</accordion>

Angular指令双向数据绑定失败

1 个答案: