角：更新模型从指令

Question

我有一个小提琴在这里：http://jsfiddle.net/KdkKE/44/

我想怎么办创建一个“切换”组件，基本上是一个自定义的复选框，但HTML改变，如果它是真的还是假的，它绑定到一个控制器中的布尔值。

当用户点击切换时，模型被更新，指令的视图改变。它与指令doc 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(); 
});