指令更新然后运行 Query 以在单击时更新 Dom答案

【问题标题】：Directive Update then run Query to Update Dom on Click指令更新然后运行 Query 以在单击时更新 Dom
【发布时间】：2016-07-14 22:49:25
【问题描述】：

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

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

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

【问题讨论】：

你给了我们太多的片段并且遗漏了关键的代码片段，比如 site.html 的控制器，指令的模板 ('views/chatList.html')。我认为你在这里有不止一个问题，比如在你的控制器中引用一个名为'vm'的变量，该变量从未被定义，并在你的指令中使用这个赋值“控制器：'ChatListController as chatList'”应该是“控制器：'ChatListController' ，控制器作为：'聊天列表'”。这只是显而易见的东西，没有看到其他相关的代码。我建议设置并与您的代码共享一个 plunker。
在我的站点控制器中，除了填充单位数组的 http 请求之外，没有与指令交互的相关内容。我将添加views/chatList.html，但关键问题在列出的三个文件中。 “控制器：'ChatListController as ChatList'”和“控制器：'ChatListController'，controllerAs:'chatList'”在设置指令时都有效。两者我都合作过。
您的站点控制器是相关的，因为如果在控制器中声明了 site.selectedUnit，您将获得与未声明时不同的结果。
另外，我继续添加 var vm = this;抱歉，无法获取完整的代码，否则这个问题会很大，我错过了这篇文章。
selectedUnit 未在站点控制器中声明。它的第一个也是唯一一个实例在视图上。

标签： javascript angularjs http angularjs-directive watch

【解决方案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

【讨论】：

$scope.$watch 正是我所需要的。我不确定我是否需要在我的指令或控制器中使用它，但是在实施了您的所有建议之后，就成功了。感谢所有的帮助。我花了一天半的时间才达到这一点。我知道我的帖子不是最容易处理的，但你真的帮了我。