gpt4 book ai didi

javascript - Angular : Update model from directive

转载 作者:可可西里 更新时间:2023-11-01 02:33:17 29 4
gpt4 key购买 nike

我这里有一个 fiddle :http://jsfiddle.net/KdkKE/44/

我想做的是创建一个“切换”组件,基本上是一个自定义复选框,但如果它是 true 或 false,html 会发生变化,它绑定(bind)到 Controller 中的 bool 值。

当用户点击开关时,模型会更新,指令的 View 也会发生变化。它类似于指令文档末尾的示例 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>

最佳答案

我认为您只是错过了 $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();
});

关于javascript - Angular : Update model from directive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15261154/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com