Javascript 角度：从指令更新模型

我这里有一把小提琴：

我想做的是创建一个“toggle”组件，基本上是一个自定义的复选框，但是如果它是真的或假的话，html会改变，它绑定到控制器中的布尔值

当用户单击切换按钮时，模型将更新，指令的视图将更改。这与指令文档末尾的示例类似，但状态将被绑定，以便在启动时正确

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);
                });
            }
        };
    });

var-app=angular.module（'app'，[]）；
函数Ctrl（$scope）{
$scope.init=函数（）{
$scope.foo=true
}
}
app.directive（'toggle'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
范围：{
标签：“@”，
ngModel:“=”
},
模板：
{{label}}:{{ngModel}}，
链接：功能（范围、元素、属性、控制器）{
元素绑定（'单击'，函数（）{
scope.ngModel=false；
属性$set（'ngModel'，false）；
console.log（'plz'，attrs.ngModel）；
});
}
};
});

-

Foo在Ctrl:{{Foo}}

我认为您只是缺少了使用。看到它在这里工作：

element.bind（'click'，function（）{
作用域$apply（函数（）{
scope.ngModel=！scope.ngModel；
});
});

它也可以这样使用，以避免嵌套在另一个函数中：

element.bind（'click'，function（）{
scope.ngModel=！scope.ngModel；
作用域：$apply（）；
});

<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>