Question

我使用Angular 1.0.7进行了以下设置：

我有一个指示显示样式复选框。

All必须切换Foo和Bar
如果Foo和Bar是真实的，All应该是真实的。
如果Foo或Bar是假的，All应该是假的。

有时会发生

Answer 1

这是一种在1.1.5及更高版本中运行良好的方法。我在<label>中打开了复选框，以利用复选框的原生点击，并将ng-change添加到复选框。删除了所有jQuery用法并使用了$broadcast和$on。我还在toggleAll ... attrs.master

中添加了一个额外的属性

app.directive("uuCheckbox", function($rootScope) {

    return {
      restrict: "A",
      transclude: true,
      replace: true,
      template:function(elem,tAttrs){
        var name;
        name = tAttrs.name ? "name='" + tAttrs.name + "'" : '';

        return "<label class='styledui'>" + 
              "<span class='custom checkbox' ng-class='{ checked: model }'></span>" + 
              "<input class='hidden' value='true' type='checkbox' ng-model='model' " + " " + name + " ng-change='checkToggle()'/>" + 
            "<span ng-class='{red: model}' ng-transclude></span>" + "</label>";

      },
      scope: {
        model: '='
      },

      link:function(scope,elem,attrs){
        if(attrs.master){

          scope.$on('slaveChanged',function(event, slaveModel){
            if(scope.model && !slaveModel){
              scope.model=false;
            }
          })
        }else{
          scope.$on('ToggleAll',function(event, toggle){
            scope.model=toggle
          });
        }

        scope.checkToggle=function(){
          if(attrs.master){
            $rootScope.$broadcast('ToggleAll', scope.model)
          }else{
            $rootScope.$broadcast('slaveChanged', scope.model)
          }
        }

      }
    };
  });

我尝试将其逆向工程设计为1.0.7并且没时间用完了。现在很难找到较旧的$ compile文档

的 DEMO

确保双重绑定同步

1 个答案: