使用angular来检测用户何时离开/进入语法块并执行操作

Question

我想在我的Web应用程序上创建一个界面，用户可以在其中输入LaTeX数学或代码块。我想实时更新“预览”块以向他们展示他们的行动结果。我会有一些语法块来表示数学块（例如[math][/math]）。

目标是看他们何时离开或进入这些街区。当他们离开块时，预览将呈现它。当他们进入街区时，它将取消它。我想使用KaTeX在预览中将它们的数学表示为LaTeX。

不幸的是，我真的不是很远：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <form method="POST" action="/api/v1/article" role="form">
        <textarea placeholder="write here" ng-model="article.content" name="content" id="content"></textarea>
      </form>
    </div>
    <div class="col-md-6" id="article-preview">
      {{ article.content }}
    </div>
  </div>
</div>

然后我的控制器现在正处于最基本的水平。

articleController.controller('write', ['$scope', 'Article',
  function($scope, Article) {
    article = {};
  }
]);

我想我需要一个指令，以及某种类型的$scope.$on类型的事件来实现这一点，以及一些指令如何才能起作用？