AngularJS複選框內指令

所以我有一個指令，其中有一個複選框。當複選框的值發生更改時，我需要進行Web服務調用。點擊時如何獲得該複選框的值？我想複選框限制在指令的範圍內。AngularJS複選框內指令

myModule.directive('test', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope:{}, 
     template: 
      '<div>'+ 
       '<input type="checkbox" ng-click="toggleRoomLock()" name="lockRoom" value="lock" ng-model="lockRoom">'+ 
      '</div>', 
     link: function(scope, element, attrs) { 
      scope.toggleRoomLock = function(){ 
       //GET VALUE OF CHECKBOX HERE 
      }; 
     } 
    } 
}

我已經嘗試使用scope.lockRoom獲得該值，但我得到了undefined。有什麼建議麼？

來源

2013-05-08 CodesLikeA_Mokey

最簡單的方法是從模板中刪除ng-click屬性並在模型上放置一個監視。更改鏈接功能：

function (scope, element, attrs) { 
    scope.lockRoom = false; // initialize to unchecked 

    scope.$watch('lockRoom', function (value) { 
     // value will contain either true or false depending on checked state 
    }); 
}

$watch讓你聽您的模型變化（主要對象添加到scope）。

Example plunker（記錄到控制檯的值）。

來源

2013-05-08 20:02:31 Martin

所以我只是嘗試了你的建議，當點擊時它不會觸發$ watch。 – 2013-05-08 20:24:03

將它與我添加的plunker進行比較。如果你仍然無法使用它，請創建一個活塞，我會盡力幫助你。 – Martin 2013-05-08 20:28:05

明白了，謝謝，我錯過了控制器。 – 2013-05-08 20:40:25

您應該能夠從您的切換功能得到scope.lockRoom值：

'<input type="checkbox" ng-click="toggle()" ng-model="lockRoom">' 
... 
scope.toggle = function() { 
    console.log('lockRoom=',scope.lockRoom) 
}

Plunker

然而，ng-change通常與複選框使用，而不是ng-click：

'<input type="checkbox" ng-change="toggle()" ng-model="lockRoom">'

使用ng-change或ng-click可能更有效率t韓使用$watch，因爲toggle()函數將不會被稱爲每個摘要循環，就像$watch一樣。

來源

2013-05-08 22:27:48

AngularJS複選框內指令

回答

相關問題