2

所以我有一个指令，其中有一个复选框。当复选框的值更改时，我需要进行 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但我变得不确定。有什么建议么？

4

2 回答 2

5

最简单的方法是从模板中删除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）。

示例 plunker（记录到控制台的值）。

于 2013-05-08T20:02:31.693 回答
2

您应该能够scope.lockRoom从您的切换功能中获取值：

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

普朗克

但是，ng-change通常与复选框一起使用，而不是ng-click：

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

使用ng-changeorng-click可能比 using 更有效$watch，因为toggle()不会像$watchis 那样在每个摘要周期都调用该函数。

于 2013-05-08T22:27:48.310 回答