Question

我需要刷新一些数据，具体取决于特定单选按钮组的选择。

work plunker http://plnkr.co/edit/kZhsiU4pVpHhoscVkvMQ?p=preview

但我既没有ng-change也没有ng-click来执行更新名称的方法，并让Hello World显示Hello'selection'。

$scope.updateValue = function(){
    $scope.name = $scope.data.myNumber;
  };

但我可以看到双向数据绑定有效 - 因此模型正在更新。

<span>You selected {{ data.myNumber }}</span>

在旁注：我尝试的另一件事是观察模型值并执行我想要做的事情，但这也不起作用 - 除了页面加载之外，不再触发watchcollection。

plunker只是单选按钮选择问题的一种表示 - 我想在数据刷新中实现的目标更加复杂。

非常感谢任何帮助。

Answer 1

不是修改name的$ scope变量，而是修改object属性，因为它会保持引用更改。

将您的html部分代码更改为此...

 <div ng-controller="MainCtrl">
      <p>Hello {{data.name}}!</p>
      <button ng-click="OpenModal('sm')">Enter Number</button>
      <br><br>
      <span>You selected {{ data.myNumber }}</span>

  </div>

你的javascript控制器就是这个......

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};

  $scope.OpenModal = function(size){
   var modalInstance = $modal.open({
            templateUrl: 'Modal.html',
            controller: 'ModalInstanceCtrl',
            windowClass: 'small-size-modal',
            size: size,
            scope: $scope
        });
  };
});

app.controller('ModalInstanceCtrl', function($scope, $modalInstance){
  $scope.ok = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.close();

  };

  $scope.updateValue = function(){
    $scope.data.name = $scope.data.myNumber;
    $modalInstance.dismiss('submit');
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

工作Plunker ..

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

Answer 2

虽然其他答案似乎有效，但我为复杂数据通信所做的是在两者之间使用服务。

由于你有两个独立的控制器，一个在你的主页面，一个用于模态，而它们的$scope是不同的，我会选择使用service进行两个控制器之间的通信。您可以查看this question以获取更多相关信息。

只需在模态上广播更改，然后在主控制器上侦听这些更改并将其反映在HTML上。

在单选按钮选择上执行某些操作更改AngularJS

2 个答案: