10

gelen Güncelleme modeli: Ben bir 'geçiş' bileşeni oluşturun yapmak temelde özel bir onay kutusunu ama doğru ya da yanlış olup olmadığını değiştirir html ile istediğiniz ne http://jsfiddle.net/KdkKE/44/Açısal: Ben burada bir keman var direktifi

Bir denetleyicide boole bağlı.

Kullanıcı geçiş düğmesine tıkladığında, model güncellendiğinde direktifin görünümü değişir. Direktiflerin http://docs.angularjs.org/guide/directive direktifinin sonundaki örneklere benzemekle birlikte, durum başlangıçta doğru olacak şekilde bağlanır.

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> 

cevap

20

Ben sadece $apply kullanımını eksik olduğunu düşünüyorum. Burada çalışan See it: http://jsfiddle.net/4TnkE/

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

Ayrıca başka işlevinde iç içe önlemek için bu gibi kullanılabilir:

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

Doh thx o bölümü kaçırdım! – kreek