AngularJS checkbox внутри директивы

Question

У меня есть директива, в которой есть флажок. Мне нужно сделать вызов веб-службы при изменении значения флажка. Как я могу получить значение этого флажка при его нажатии? Я хочу, чтобы флажок ограничивался областью действия директивы.

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 может быть более эффективным t han, используя $watch, так как функция toggle() не будет называться каждый цикл дайджеста, например $watch.