Angularjs 角度指令双向数据绑定失败
我有一个下拉指令,其中有一个函数,用于设置下拉菜单中的活动项:Angularjs 角度指令双向数据绑定失败,angularjs,angular-ui-bootstrap,Angularjs,Angular Ui Bootstrap,我有一个下拉指令,其中有一个函数,用于设置下拉菜单中的活动项: angular.module('clientApp') .directive('customDropDown', function ($filter, calculationsFactory) { return { templateUrl: 'template/custom-drop-down/custom-drop-down.html', restrict: 'E', scope:
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>
定向模板:
<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>
{{activeResource.title}
-
问题是,在这种情况下,函数不会双向绑定“activeMedia”。它不会得到更新
我试图在jsfiddle中复制这个案例,但效果很好。有什么我可能错过的吗
更新
我已经确定了这个问题。
我的指令位于ui引导程序中的accordion指令中:
<accordion>
<accordion-group heading="Resources" is-open="true">
<custom-drop-down resources="medias" active-resource="activeMedia"></custom-drop-down>
</accordion-group>
</accordion>
如果我把指令移到手风琴指令之外,它就会起作用。所以,不知何故,手风琴指令干扰了我的指令。可以在不修改ui引导代码的情况下解决此问题吗?在您的情况下,这是一个范围问题,如前所述 对于角度引导控件内的元素,您需要使用
$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>
activeResource
(activeMedia
)的数据类型是什么?如果它是一个数组,那么这样更改它将使它指向另一个引用,这将打破AngularJS的内部$digest
循环(它通过引用比较内容)。@SergiuParaschiv activeResource是一个对象。资源是一个包含对象的数组。是否在ng click
或其他内置AngularJS指令中调用setActiveResource
?显示该指令的模板。您很有可能在没有$apply
@SergiuParaschiv Yes的情况下从DOM事件调用Angular。已添加有问题的指令模板。