我正在尝试使用AngularJS创建一个响应用户点击的模型。我在控制器中拥有模型的所有信息(其他元素将在稍后添加到范围中),并且指令处理在视图中显示元素并对其执行操作,例如在单击时将其最小化。
我遇到的麻烦是在makeDialog指令中使链接函数更改模型中experimentDialog.minimized的值。我怎么能做到这一点?我究竟做错了什么? 现在,当您单击按钮时没有任何反应 - 所以帮助进行故障排除也很受欢迎。 如果您需要更多信息,请与我们联系!
角:
angular.module('root', [])
.controller('index', ['$scope', function($scope){
$scope.experimentDialog = {
minimized: false,
width: 200,
height: 300,
top: 10,
left: 10,
template: 'experiment-dialog.html'
};
}])
.directive('makeDialog', function() {
return {
restrict: 'E',
scope: {
model: '='
},
templateUrl: 'dialog.html',
link: function(scope, element, attrs) {
scope.minimize = function() {
scope.model.minimized = true;
scope.$apply();
};
}
};
});
dialog.html:
<html>
<link href='dialog.css' rel='stylesheet' type='text/css'/>
<body>
<div class='dialog' ng-hide={{model.minimized}}>
<button id='minimize' ng-click="minimize()"> _ </button>
</div>
</body>
</html>
编辑:如果有帮助,这就是Plunker的全部内容: http://plnkr.co/edit/3S9q53VfGqRrWbVgR5XU?p=preview
答案 0 :(得分:0)
因此,您的按钮确实会更改模型。问题是您的ng-hide
语法。我在框中显示模型,以便您可以看到值。
<div class='dialog' ... ng-hide="model.minimized"> <!-- no {{}}! -->
这个forked plunkr具有我认为的预期效果。