Question

在我的示例中，我希望我的子项在显示时处于活动状态（工作正常）。然后，当我点击该项目时，我仍然希望该项目处于活动状态（不工作）。相反，每次单击时，活动类都会打开和关闭。

我的想法是，我可以显示多个项目，其中任何一个都可以是活动的，所以我确实有一个方法可以在设置活动项目之前清除所有项目。

清除活动项目后，在使用$ timeout时，我可以正常工作。

示例： Plunker

所以我的问题是，为什么在摘要已经发生时我必须在这里使用$ timeout？或者这是一个错误？

Answer 1

这是由于如何以角度实现双向绑定。单击项目和“激活”函数时实际上是什么：

您调用函数'clearActive'修改父作用域并将项目的'active'属性设置为false
然后将当前范围的“active”属性更改为true。
完成此摘要后，angular.js再运行一次以检查没有更多更改。这个新的摘要发现'item.active'属性更改为false并将子指令范围的'active'属性更新为false，覆盖以前的更改

我想建议将项目本身传递给子指令而不仅仅是'active'属性 - 这里是fork of your plunker which works that way。

Answer 2

我实施了可能解决您问题的概念证明

http://jsfiddle.net/UDc2E/

基本上我有一个子指令，当一个项目被“激活”时，用父ctrl注册去激活回调

var module = angular.module（“app”，[]）;

module.controller("Ctrl",["$scope",function($scope){
    $scope.items=[
        {active:true,text:"1"},
        {active:false,text:"2"}
    ];
}]);
module.directive("activationGroup",[function(){
    return {
        restrict:"A",
        controller: function($scope) {
            var onDeactivationCallBacks = [];

            this.register = function(onDeactivation){
                onDeactivationCallBacks.push(onDeactivation);
            }
            this.trigger = function() {
                angular.forEach(onDeactivationCallBacks,function(cb){

                    cb();
                })
            }
        }
    }
}]);
module.directive("activationItem",["$parse",function($parse){
    return {
        restrict:"A",
        require:"^activationGroup",
        link: function($scope,$element,$attrs,activationGroupCtrl){
            var onActivationCB = function(){
                var f = $parse($attrs.onActivation);
                return function(){
                    f($scope);
                }
            }();
            var onDeactivationCB = function(){
                var f = $parse($attrs.onDeactivation);
                return function(){
                    f($scope);
                }
            }();
            activationGroupCtrl.register(onDeactivationCB);
            $element.on("click", function(){
                $scope.$apply(function(){
                    activationGroupCtrl.trigger();
                    onActivationCB();
                });            
            });
        }
    }
}]);

问候

在子指令中使用Angularjs ng-class切换类

2 个答案: