如何使链接函数更改范围变量

时间:2015-07-08 19:49:39

标签: angularjs

我正在尝试使用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

1 个答案:

答案 0 :(得分:0)

因此,您的按钮确实会更改模型。问题是您的ng-hide语法。我在框中显示模型,以便您可以看到值。

<div class='dialog' ... ng-hide="model.minimized"> <!-- no {{}}! -->

这个forked plunkr具有我认为的预期效果。