AngularJS - 范围不会在 jquery ui 对话框中更新答案

【问题标题】：AngularJS - Scope doesn't updates inside jquery ui dialogAngularJS - 范围不会在 jquery ui 对话框中更新
【发布时间】：2014-04-08 11:00:27
【问题描述】：

例如，

我有两个模板route_one 和route_two。
在route_one 中，我有一个打开jquery ui 对话框的链接。在对话框中，我可以将一些值推送到添加值列表所在的范围使用ng-repeat 显示。

这是问题，我在范围中添加了一些值，然后我转到route_two 并再次返回route one。此时范围应该是空的，但它仍然保留旧值。

我创建了一个plunkr 供您参考。

http://plnkr.co/edit/xVtiYBwoM6h8SJpBIUh9?p=preview

复制问题的步骤，

点击show dialog
添加一些值。您会看到，这些值将显示在主页和对话框中。
点击Goto Rotue Two
点击Back
由于范围为空，主页面显示的值将被清除。但问题是，里面没有更新对话框。

我尝试了$apply 和$compile，没有按预期工作。

提前致谢。

【问题讨论】：

标签： javascript jquery angularjs jquery-ui angularjs-scope

【解决方案1】：

问题是你的back()-method 使用了window.history.back();。

替换

<a href="javascript:void(0);" ng-click="back();">Back</a>

与

<a href="#!/route_one">Goto Route One</a>

【讨论】：

【解决方案2】：

Phylax 指出它绝对正确。你可以使用 tag 并给出 href 或者你也可以使用

$location.path('/route_one') ，如果你想使用角度路由

【讨论】：

【解决方案3】：

知道了！很简单，对话框关闭后我必须销毁它。

看看更新后的plunkr

http://plnkr.co/edit/Y8yVyp11h8FmKXQxcKXx?p=preview

var route_one = angular.module('routeOne', []);

route_one.controller('route_one_controller', ['$scope', 
  function($scope){
    $scope.values = [];

    $scope.add_values = function(){
      if($scope.new_value.length <= 0){ return false; }
      $scope.values.push({name: $scope.new_value});
      $scope.new_value = '';
      $('#dialog').dialog('close');
    };

    $scope.show_dialog = function(){
      $('#dialog').dialog({
        height: 'auto',
        width: 370,
        resizable: false,
        autoOpen: false,
        close: function(){
          $(this).dialog('destroy');
        }
      });
      $('#dialog').dialog('open');
    };
  }
]);

【讨论】：