Пользовательская директива - двусторонняя привязка не работает

Question

Я пытаюсь написать простую настраиваемую директиву в Angular, которая превращает тэг в кнопку переключения (аналогично флажку). Код, который я написал до сих пор, обновляет внутреннюю переменную (изолированная область), но двусторонняя привязка не работает. Когда я нажимаю кнопку, кнопка переключается (класс css появляется и исчезает), но myVariable не обновляется.

Любая помощь очень ценится!

Использование

<button toggle-button="myVariable">My Button</button> 

Директива код

(function() { 

var directive = function() { 

    return { 

     restrict: 'A', 

     scope: { 
      toggleButton: '=checked' 
     }, 

     link: function($scope, element, attrs) { 

      $scope.$watch('checked', function(newVal, oldVal) { 
       newVal ? element.addClass ('on') : element.removeClass('on'); 
      }); 

      element.bind('click', function() { 
       $scope.checked = !$scope.checked; 
       $scope.$apply(); 
      }); 
     } 
    }; 
}; 


angular.module('myApp') 
    .directive('toggleButton', directive); 

}()); 

Answer 1

просто заменить

scope: { 
      toggleButton: '=checked' 
     } 

в

scope: { 
      checked: '=toggleButton' 
     } 

Answer 2

Ваша директива сфера ищет атрибут, который не существует.

Попробуйте изменить:

scope: { 
    toggleButton: '=checked' 
    }, 

Для

scope: { 
    toggleButton: '=' 
}, 

Разница заключается в том, что =checked будет искать атрибут checked тогда = будет использовать тот же атрибут как имя свойства в объекте области видимости

Также необходимо будет изменить $watch, но вы можете избавиться от он и использовать ng-class

Answer 3

Как charlietfl сказал, что вам не нужно, что проверили переменную. Вы вносите в него изменения вместо внешней переменной.

Вот фиксированная версия:

angular.module('components', []) 
    .directive('toggleButton', function() { 
     return { 
      restrict: 'A', 
      scope:{ 
       toggleButton:'=' 
      }, 
      link: function($scope, $element, $attrs) {  
       $scope.$watch('toggleButton', function(newVal) { 
        newVal ? $element.addClass ('on') : $element.removeClass('on'); 
       }); 
       $element.bind('click', function() { 
        $scope.toggleButton = !$scope.toggleButton; 
        $scope.$apply(); 
       }); 
      } 

     } 
    }) 

angular.module('HelloApp', ['components']) 

http://jsfiddle.net/b3b3qkug/1/