Question

所以我有一个指令，里面有一个复选框。我需要在复选框的值更改时进行Web服务调用。如何在单击时获取该复选框的值？我希望复选框仅限于指令的范围。

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获取值但我未定义。有什么建议吗？

Answer 1

最简单的方法是从模板中删除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（记录到控制台的值）。

Answer 2

您应该可以从切换功能中获取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可能比使用$watch更有效，因为toggle()函数不会在每个摘要周期调用，例如$watch是

AngularJS复选框里面的指令

2 个答案: