javascript - ng-model 未从 Controller 更新到 View

Question

in this plunk我为上周遇到的问题做了一个演示。代码片段包含 Bootstrap 选项卡，其中包含两个不同的页面 - page1 和 page2，它们使用相同 Controller 。 Page1 有 ng-repeat，当我们从那里点击选项时，它会在 Controller 函数 vm.edit(selected_variable) 中被点击，Page2 有一个简单的输入框，其中有一个 ng-model="虚拟机名称”。我的问题是当 vm.edit 函数更新它时，ng-name 没有更新或被值替换。我可以使用 rootScope 解决这个问题，但我不想使用 rootScope。我只是想避免使用 rootScope 并想使用 vm。

我的代码示例:

第 1 页:

<div ng-controller="appCtrl as vm">
  <div>
    <ul>
      <li ng-repeat="list in vm.list track by $index">
        <button type="button" class="btn-u btn-brd btn-u-none" ng-click="vm.edit(list, $index)" data-toggle="tab" href="#page2">
                    {{ list.name }}
                </button>
      </li>
    </ul>
  </div>
</div> 

第 2 页:

<div ng-controller="appCtrl as vm">
  <input type="text" ng-model="vm.name">
</div>

Controller :

vm.edit = function(listItem, index) {
    vm.name = listItem.name;

    console.log(vm.name);
  };

edit 函数更新 page1 中的 vm.name 但它不会反射(reflect)在 page2 中。无法解决这个问题，有什么想法吗？

Answer 1

为了在 Controller 之间进行通信，您可以使用$broadcast 事件来传输数据。这是经过编辑的 Plunker .

在 vm.edit 函数中注册广播并在同一个 Controller 中监听事件:

vm.edit = function(listItem, index) {
  $rootScope.$broadcast("vm name: changed", listItem.name);
};
$scope.$on("vm name: changed", function(evt, obj){
  vm.name = obj;
});

另外不要忘记将 $rootScope 依赖项添加到您的 Controller :

app.controller('appCtrl', function($scope, $rootScope) {...});

注意:这里$rootScope只用于触发事件，不存储值。