angularjs - How to make a link function change a scope variable -
i trying use angularjs make model responds click user. have information model in controller (other elements added scope later), , directive handles showing element in view , performing actions on it, such minimizing on click.
what i'm having trouble making link function in makedialog directive change value of experimentdialog.minimized in model. how can accomplish this? doing wrong? right now, nothing happens when click button -- troubleshooting appreciated. let me know if need more information!
angular:
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>
edit: if helps, here whole thing on plunker: http://plnkr.co/edit/3s9q53vfgqrrwbvgr5xu?p=preview
so, button change model. problem ng-hide
syntax. display model in box can see values.
<div class='dialog' ... ng-hide="model.minimized"> <!-- no {{}}! -->
this forked plunkr has, believe be, intended effect.
Comments
Post a Comment