自定義指令 - 雙向綁定不起作用

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/