在单选按钮选择更改AngularJS上做一些事情答案

【问题标题】：Do something on radio button selection change AngularJS在单选按钮选择更改AngularJS上做一些事情
【发布时间】：2016-04-02 12:17:45
【问题描述】：

我需要根据对特定单选按钮组的选择来刷新一些数据。

工作的笨蛋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 只是单选按钮选择问题的一种表示——我想要在数据刷新中实现的更复杂。

任何帮助将不胜感激。

【问题讨论】：

您希望在模式打开时在主页上更改它？
是的，我希望它在主页上进行更改 - 当进行选择时。基本上，Hello World 应该更新为 Hello 'selection'！但很明显，只有当你点击 OK 时你才能看到它。
对于复杂的数据通信，看我的回答。

标签： javascript angularjs

【解决方案1】：

不要修改名称的 $scope 变量，而是修改对象属性，因为它会保持引用更改。

把你的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

【讨论】：

【解决方案2】：

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

由于您有两个单独的控制器，一个在您的主页中，一个用于模态，并且它们的 $scopes 是不同的，我会使用 service 来在两个控制器之间进行通信。您可以查看this question 了解更多信息。

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

【讨论】：