javascript - AngularJS（v1.7.9）-当兄弟（B）更新同一个控制器上的范围时，如何获取兄弟（A）指令的范围进行更新

Question

本质上，我有 6 个文件在玩

1. 我的控制器
2. 我的控制器 HTML 模板
3. 指令 A
4. 指令一个 HTML 模板
5. 指令 B
6. 指令 B HTML 模板

我对 angularjs 的主要抱怨是，在子组件（指令）之间传递数据非常困难，不幸的是，我在回到旧项目时陷入了其中一种情况。

在我看来，我好像在某个地方遗漏了什么......

当我从指令 B 更新字段时，我如何告诉指令 A 范围已更新？即使我从控制器运行 $scope.$apply()，指令 A 似乎也永远不会得到更新。

// My Controller

// ...

const Controller = ['$scope', ($scope) => {
  $scope.job = null
  $scope.isLoading = true

  const onLoad = async () => {
    // make HTTP calls to load $scope, which is used by directives
    const res = await API.get('/jobs/1234567890') // we use axios, please ignore, its just here for context
    $scope.job = res.data.jobs[0]
    $scope.isLoading = false
  }
  onLoad()
}]

module.exports = Controller

<!-- My Controller HTML Template -->
<div ng-show='!isLoading'>
  <directive-a
    job='job'
  ></directive-a>
  <directive-b
    job='job'
  ></directive-b>
</div>

// Directive A
const template = require('./templateA.html')

const directiveA = [() => {
  return {
    restrict: 'E',
    replace: true,
    template,
    scope: {
      job: '='
    },
    link: scope => {
      scope.doStuff = () => {
        console.log('do stuff clicked')
      }
    }
  }
}]

module.exports = directiveA

<!-- Directive A HTML Template -->
<button ng-disabled='job.status !== "xyz"' ng-click='doStuff()'>Click Me</button>

// Directive B
const template = require('./templateB.html')

const directiveB = [() => {
  return {
    restrict: 'E',
    replace: true,
    template,
    scope: {
      job: '='
    },
    link: scope => {
      // ...
    }
  }
}]

module.exports = directiveB

<!-- Directive B HTML Template -->
<div>
  <input
    type='text'
    ng-model='job.status'
  />
</div>

标签： javascriptangularjs