Angularjs 与MathJax-UI路由器的角度绑定不一致？

我正在用MathJax使用Angular UI路由器。当我路由到一个新的状态时，MathJax不会得到处理。让我恼火的是，如果我有一个代码完全相同的更新按钮，它就会工作。只是不是靠它自己

HTML

---

我在想为什么会这样。我需要使用$apply吗？其中一个暗示使用了指令。但是，我不需要这个函数。我真的只需要JSON数据和数学表达式就可以可靠地进行排版。

因为您试图在呈现页面之前修改页面上的数学。可以使用$timeout等待渲染：

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  $urlRouterProvider.otherwise("/");//Was defaulting to route 1. No more

  $stateProvider.state('route1', {
      url: "/route1",
      templateUrl: "route1.html",
      controller: function($scope, $http, $timeout){
        $http({method: 'GET', url: 'data.json'})
        .success(function(data) {
          $scope.data = data;
          $timeout(function() {
            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
          }, 0);
        })
        $scope.update = function($scope){
          MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        }
      }
  });
});

---

因为您试图在呈现页面之前修改页面上的数学。可以使用$timeout等待渲染：

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  $urlRouterProvider.otherwise("/");//Was defaulting to route 1. No more

  $stateProvider.state('route1', {
      url: "/route1",
      templateUrl: "route1.html",
      controller: function($scope, $http, $timeout){
        $http({method: 'GET', url: 'data.json'})
        .success(function(data) {
          $scope.data = data;
          $timeout(function() {
            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
          }, 0);
        })
        $scope.update = function($scope){
          MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        }
      }
  });
});

---

看起来您只需要等待DOM稳定下来，然后MathJax才能处理它。一个简单的setTimeout调用似乎可以解决这个问题：

$http({method: 'GET', url: 'data.json'})
.success(function(data) {
  $scope.data = data;
  setTimeout(function() {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  });
});

有关示例，请参见

你提到使用指令；您可以使用它来抽象出手动调用MathJax函数的需求

在本例中，我创建了一个名为math的指令，该指令自动列出MathJax传入的内容：

var myapp=angular.module'myapp'，[ui.router] myapp.configfunction$stateProvider，$urlRouterProvider{ $urlRouterProvider.OR//；//默认为路由1。不再 $stateProvider.state'route1'{ url:/route1， templateUrl:route1.html， 控制器：函数$scope、$http、$timeout{ $http{method:'GET'，url:'data.json'} .successfunctiondata{ $scope.data=数据； }; } }; }; myapp.directive'math'，函数{ 返回{ 限制：“EA”， 范围：{ 数学：“@” }, 链接：functionscope、elem、attrs{ 范围.$watch'math'，functionvalue{ 如果！返回值； 要素价值； Queue[Typeset，MathJax.Hub，elem[0]]； }; } }; }; 一号干线的数据 姓名： {{data.name}

方程式：

请看演示

---

按照这条路线，传递给math指令的任何内容在发生更改时都将使用MathJax自动呈现。请参阅一个可以编辑公式的示例：

看起来您只需要等待DOM稳定下来，然后MathJax才能处理它。一个简单的setTimeout调用似乎可以解决这个问题：

$http({method: 'GET', url: 'data.json'})
.success(function(data) {
  $scope.data = data;
  setTimeout(function() {
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  });
});

有关示例，请参见

你提到使用指令；您可以使用它来抽象出手动调用MathJax函数的需求

在本例中，我创建了一个名为math的指令，该指令自动列出MathJax传入的内容：

var myapp=angular.module'myapp'，[ui.router] myapp.configfunction$stateProvider，$urlRouterProvider{ $urlRouterProvider.OR//；//默认为路由1。不再 $stateProvider.state'route1'{ url:/route1， templateUrl:route1.html， 控制器：函数$scope、$http、$timeout{ $http{method:'GET'，url:'data.json'} .successfunctiondata{ $scope.data=数据； }; } }; }; myapp.directive'math'，函数{ 返回{ 限制：“EA”， 范围：{ 数学：“@” }, 链接：functionscope、elem、attrs{ 范围.$watch'math'，functionvalue{ 如果！返回值； 要素价值； Queue[Typeset，MathJax.Hub，elem[0]]； }; } }; }; 一号干线的数据 姓名： {{data.name}

方程式：

请看演示

---

按照这条路线，传递给math指令的任何内容在发生更改时都将使用MathJax自动呈现。有关编辑公式的示例，请参见：

谢谢，谢谢，谢谢。我很欣赏改良的普朗克。我想这和渲染时间有关。不过我不明白超时时间。没有固定的时间段。这是一种有角度的攻击吗？或者您的意思是：当此成功函数完成时，请执行以下操作？setTimeout默认延迟为0。您不需要使用Angular的$timeout服务，因为MathJax不需要一个摘要周期来工作。我还更新了答案，提供了更多信息，包括如何构建指令。回答得很好。非常彻底。指令是一个有趣的转折。谢谢，谢谢，谢谢。我很欣赏改良的普朗克。我想这和渲染时间有关。不过我不明白超时时间。没有固定的时间段。这是一种有角度的攻击吗？或者您的意思是：当此成功函数完成时，请执行以下操作？setTimeout默认延迟为0。您不需要使用Angular的$timeout服务，因为MathJax不需要一个摘要周期来工作。我还更新了答案，提供了更多信息，包括如何构建指令。回答得很好。非常彻底。导演

---

ective是一个有趣的转折点。谢谢。这个评论也很有帮助。谢谢。这一评论也很有帮助。