指令更新然后运行查询更新 Dom 单击

Question

我已经查看了 10 多个不同的指导性问题，并且 none 到目前为止对我有用。我试图让我的控制器识别 site.selectedUnit 已更改，这会更新我的自定义指令中的 selectedChannel。第一次效果很好，但之后 ng-click 不会更改视图信息。 selectedChannel 已注册并存储在我的 chatList 控制器上，但不会再次调用 http 请求。

如果我单击 site.html 中的一个单元，chatList 视图中单元编号的 selectedChannel 会发生变化，所以我猜测不会再次调用 http 请求。

如何向指令或我的 chatList 控制器添加侦听器，以便在 selectedChannel 更改时再次调用 http 请求？

Answer 1

根据您提供的代码，我只能说您需要做一些更改

site.controller

为 $scope.site 添加定义，否则 site.selectedUnit 将仅在通过 ng-click 在 HTML 中定义的上下文中可用。

$scope.site = {
  selectedUnit: null
};

chatList.directive

删除隔离范围并通过 bindToController 注入 selectedChannel 属性以便在控制器中可以访问它。

.directive('chatList', function() {
  return {
    restrict: 'E',
    bindToController: {
      selectedChannel: '='
    },
    templateUrl: 'chatList.html',
    controller: 'ChatListController',
    controllerAs: 'chatList'
  };
})

chatList.controller

注意 selectedChannel.id 的变化以进行 $http.get() 调用

vm.tenants = [];

$scope.$watch(angular.bind(vm.selectedChannel.id, function() {

   // make http.get call here
}))

您还有其他问题太多无法一一列举，所以这里有一个可行的 plunker

指令更新然后运行查询更新 Dom 单击

Directive Update then run Query to Update Dom on Click

javascript

http

watch

angularjs

angularjs-directive

指令更新然后 运行 查询更新 Dom 单击

Directive Update then run Query to Update Dom on Click

javascript

http

watch

angularjs

angularjs-directive

指令更新然后运行查询更新 Dom 单击