Angular指令：基于父指令值变更更新子指令

嘿，我来帮你搞定父子Angular指令之间的同步更新问题！你已经在子指令里用了require: '^osSendMessage'，这步选对了方向——利用父指令的控制器来做通信是Angular里这类场景的最佳实践之一。下面是具体的实现方案：

我们需要在父指令的控制器里暴露要传递给子指令的属性，以及可选的更新方法，这样子指令就能监听这些属性的变化：

commonApp.directive('osSendMessage', [function () {
  return {
    restrict: 'E', // 这里假设是元素指令，你可以根据实际使用场景调整为'A'等
    controller: function ($scope) {
      // 存储要传递给子指令的内容，初始值可以根据需求设置
      this.sharedContent = '';

      // 提供一个更新内容的方法，方便父指令内部或外部调用
      this.updateSharedContent = function(newValue) {
        this.sharedContent = newValue;
      };

      // 举个例子：如果父指令自身有绑定的变量，比如$scope.parentInputValue，
      // 可以监听它的变化来同步到sharedContent
      $scope.$watch('parentInputValue', function(newVal) {
        if (newVal !== undefined) {
          this.sharedContent = newVal;
        }
      }.bind(this));
    }
  };
}]);

子指令的link函数会拿到第四个参数——我们require的父指令控制器，接下来只要监听它的属性变化，就能同步更新子指令的内容（包括你的TinyMCE编辑器）：

commonApp.directive('osMsgBody', [function () {
  return {
    restrict: 'A',
    require: '^osSendMessage', // 确保父指令存在于当前元素的祖先节点中
    scope: {
      body: '='
    },
    link: function (scope, element, attrs, parentSendMsgCtrl) {
      // 监听父控制器里sharedContent的变化
      scope.$watch(
        () => parentSendMsgCtrl.sharedContent,
        (newVal) => {
          if (newVal) {
            // 同步到子指令的body属性
            scope.body = newVal;
            // 如果需要直接更新TinyMCE编辑器的内容，确保编辑器已初始化
            const editor = tinymce.get(element[0]);
            if (editor) {
              editor.setContent(newVal);
            }
          }
        }
      );

      // 可选：如果需要子指令的body变化时同步回父指令，也可以加个watch
      scope.$watch('body', (newVal) => {
        if (newVal) {
          parentSendMsgCtrl.sharedContent = newVal;
        }
      });
    },
    controller: function ($scope) {
      $scope.tinymceOptions = {
        resize: false,
        height: 300,
        entity_encoding: "raw"
        // plugins: 'print textcolor',
        // toolbar: "undo redo styleselect bold italic print forecolor backcolor"
      };
      // 你的其他控制器逻辑...
    }
  };
}]);

• 这种通过require+控制器的通信方式，比直接依赖scope继承更清晰，也更符合组件化的思想，避免了scope污染。
• 如果你的TinyMCE初始化有延迟，可能需要在编辑器的init事件触发后再执行内容更新，或者用$timeout做个小延迟确保编辑器已就绪。
• 要是父指令和子指令的关系更紧密，也可以考虑用Angular的$broadcast/$on事件来传递更新，但控制器通信的性能会更好一些。

内容的提问来源于stack exchange，提问作者mohsinali1317