Question

我有一个指令，为元素创建一个包装器。这个问题是＆＃34;被选中＆＃34; class不会根据myValue值进行切换。我觉得这与我如何用角元素实现ng-class有关，但我不知道如何解决这个问题。任何想法??

基本上我希望包装<label>元素具有基于子模型值的类。

    <input my-checkbox type="checkbox" ng-model="myValue" ng-true-value="1" ng-false-value="0">


  module.directive('myCheckbox', function($compile) {
    return {
      restrict: 'A',
      scope: {
        ngModel: '='
      },
      link: function(scope, element) {
        element.attr('type', 'checkbox');
        var wrapperEl = angular.element('<label class="checkbox-label" ng-class="{\'is-selected\': ngModel}"></label>');
        if(scope.ngModel) {
          wrapperEl.addClass('is-selected');
        }
        wrapperEl.on('click', function() {
          // console.log("wrapperEl: %o", wrapperEl);
          var w = angular.element(element[0].parentNode);
          if(scope.ngModel) {
            w.addClass('is-selected');
          } else {
            w.removeClass('is-selected');
          }
        });
        element.wrap(wrapperEl);
        wrapperEl = element.parent();
        var checkEl = angular.element('<i class="Icon Icon--check text-success Icon--lg" ng-show="ngModel"></i>');
        element.attr('style', 'position: absolute; left: -9999px;');
        element.after(checkEl);
        $compile(checkEl)(scope);
      }
    };
  });

Answer 1

我通过添加$ watch方法修复此问题。

scope.$watch('ngModel', function() {
  if(scope.ngModel) {
    wrapperEl.addClass('is-selected');
  }
  else
  {
    wrapperEl.removeClass('is-selected');
  }
});

如何将包装元素的数据绑定指令设置为angular

1 个答案: