kątowa: Aktualizacja modelu z dyrektywą

Question

Mam skrzypce tutaj: http://jsfiddle.net/KdkKE/44/

Co chciałbym zrobić utworzyć komponent „przełączania”, w zasadzie własnego wyboru, lecz z HTML, który zmienia jeśli to prawda czy fałsz , który jest powiązany z boolowskim w kontrolerze.

Gdy użytkownik klika na przełącznik, model jest aktualizowany, zmienia się widok dyrektywy. Jest podobny do przykładów na końcu dyrektyw, ale stan byłby związany, aby był poprawny przy uruchomieniu.

var app = angular.module('App', []); 

function Ctrl($scope) { 
    $scope.init = function() { 
     $scope.foo = true 
    } 
} 

app.directive('toggle', function() { 
     return { 
      restrict: 'E', 
      replace: true, 
      transclude: true, 
      scope: { 
       label: '@', 
       ngModel: '=' 
      }, 
      template: 
       '<div style="cursor: hand; cursor: pointer">{{label}}: {{ngModel}}</div>', 
      link: function(scope, element, attrs, controller) { 
       element.bind('click', function() { 
        scope.ngModel = false; 
        attrs.$set('ngModel', false); 
        console.log('plz', attrs.ngModel); 
       }); 
      } 
     }; 
    }); 

-

<div ng-app="App"> 
    <div ng-controller="Ctrl" ng-init="init()"> 
     <p>Foo in Ctrl: {{foo}}</p> 
     <toggle label="Foo" ng-model="foo"></toggle> 
    </div>  
</div> 

Answer 1

Myślę, że po prostu brakuje użycie $apply. Zobacz pracuje tutaj: http://jsfiddle.net/4TnkE/

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

Może być również stosowany w ten sposób, aby uniknąć zagnieżdżania w innej funkcji:

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