指令點擊獲取調用兩次

我有以下指令：指令點擊獲取調用兩次

mod.directive('mdCheckbox', function(){ 
     var link = function(scope, element, attr, ngModel){ 
     var inp = element.find('input'); 

     scope.$watch(function(){ 
      return ngModel.$viewValue; 
     }, function(newVal){ 
      console.log('newVal: ' + newVal); 
      if(newVal){ 
       inp.attr('checked', 'checked'); 
      }else{ 
       inp.removeAttr('checked'); 
      } 
     }); 

     scope.clickT = function(evt){ 
      // ** why the need for stopPropagation ? 
      evt.stopPropagation(); 
      console.log('click called'); 
      if(inp.is(':checked')){ 
       ngModel.$setViewValue(false); 
       console.log('set to false'); 
      }else{ 
       ngModel.$setViewValue(true); 
       console.log('set to true'); 
      } 
     }; 
    }; 

    var directive = { 
     restrict: 'EA', 
     require: 'ngModel', 
     scope: { 
      text: '@mdText' 
     }, 
     template: '<div ng-click="clickT($event)" class="checkbox"><input type="checkbox"/>' + 
        '<span>{{text}}</span></div>', 
     replace: true, 
     link: link 
    }; 

    return directive; 

});

和HTML：

<md-checkbox md-text="Is Awesome" ng-model="user.isAwesome"></md-checkbox>

現在clickT處理程序被調用兩次，我必須阻止它的傳播。但是我不清楚爲什麼會發生這種情況。第二個問題是，即使這看起來像是有效的，但在幾次點擊之後，它停止工作 - 該值不再改變真/假。

Here's一個plunkr測試

感謝。

來源

2015-04-17 sirrocco

你不應該手動更改DOM，因爲你可以使用數據進行裝訂。但我不會去解決這個問題，因爲它不是你問的問題的答案。

您示例中的問題是切換「檢查/取消選中」複選框的代碼。這不是一個屬性，它是一個屬性（它可以是true/false，不包含值）。

checked屬性在初始加載後不更新checked屬性。該屬性實際上與defaultChecked屬性有關。

將其更改爲：

if (newVal) { 
    inp.prop('checked', true); 
} else { 
    inp.prop('checked', false); 
}

Working Plnkr

此外，您還可以刪除stopPropagation通話。

來源

2015-04-17 12:47:37

恐怕你錯了'checked'不是一個屬性，請參閱：https：//developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input –

得到我upvote，因爲我還沒有找到另一種方法來調用輸入＃$ render（）方法，而無需直接寫入模型。 –

@Werlang我的意思是在jQuery上下文中，閱讀jQuery文檔中的「Attributes vs. Properties」：https://api.jquery.com/prop/ –

您添加和刪除checked屬性的方式有點奇怪。保持簡單，只需將輸入設置爲true或false即可。

Working Demo

scope.clickT = function(){ 

       console.log('click called'); 
       if(inp){ 
        ngModel.$setViewValue(false); 
        console.log('set to false'); 
       }else{ 
        ngModel.$setViewValue(true); 
        console.log('set to true'); 
       } 
      };

來源

2015-04-17 12:43:35 tpie

這從一個角度無障礙點完全錯誤的。你應該更新選中的屬性。 –

它適用於如果您查詢ngModel而不是input。

if (ngModel.$viewValue) ...

雖然我不知道這是什麼指令給你買......

來源

2015-04-17 12:47:48

指令點擊獲取調用兩次

回答

相關問題