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复选框内指令

回答

相关问题