कोणीय: अद्यतन मॉडल निर्देश

Question

से मैं एक बेला अप यहाँ: http://jsfiddle.net/KdkKE/44/

मैं एक 'टॉगल' घटक बनाने करना चाहते हैं क्या, मूल रूप से एक कस्टम चेकबॉक्स लेकिन एचटीएमएल कि बदलता है अगर यह सही या गलत है साथ , जो एक नियंत्रक में एक बूलियन के लिए बाध्य है।

जब उपयोगकर्ता टॉगल पर क्लिक करता है तो मॉडल निर्देशक के दृश्य परिवर्तन को अद्यतन करता है। यह डायरेक्टिव डॉक http://docs.angularjs.org/guide/directive के अंत में उदाहरणों के समान है लेकिन राज्य बाध्य होगा ताकि स्टार्टअप पर यह सही होगा।

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

मुझे लगता है कि तुम सिर्फ $apply के उपयोग याद कर रहे हैं। इसे यहाँ काम कर देखें: http://jsfiddle.net/4TnkE/

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

यह भी एक और समारोह में घोंसला बनने से बचने के लिए इस तरह इस्तेमाल किया जा सकता:,

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