Question

问题非常简单。我正在调用$ rootScope。$在其他库（Annyang）（talater.com）的函数中应用于库检测到的成功命令。它工作正常。但是，当我移动到另一个状态，并回到我的初始状态时，它不起作用。该库仍然可以捕获我的所有命令，但$ rootScope。$ apply不会＆＃34;应用＆＃34;对我观点的改变。

重现方式：转到＆＃34;状态1＆＃34; - ＆GT;允许麦克风访问 - ＆gt;说＆＃34;你好＆＃34; /＆＃34;测试＆＃34; - ＆GT;预计视图中的消息更改 - ＆gt;转到＆＃34;状态2＆＃34; - ＆GT;回到＆＃34;状态1＆＃34; - ＆GT;说＆＃34;你好＆＃34; /＆＃34;测试＆＃34; - ＆GT;期望在视图中更改消息（但不会发生）

以下是plunkr中的演示：http://plnkr.co/edit/7cQmPjcFHPcYkPCry4YA

的index.html

<html>
<head>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
    <script data-require="annyang@1.6.0" data-semver="1.6.0" src="https://cdnjs.cloudflare.com/ajax/libs/annyang/1.6.0/annyang.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body>
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
    <main ui-view="">
      <p>Main</p>
    </main>
  </body>
</html>

app.js

(function(){
"use strict";

var app = angular.module("app", ["ui.router"]);

app.run(function($state){
    console.log("RUNNING");
});

app.config(["$stateProvider", State]);

function State($stateProvider){
    $stateProvider
    .state("state1", {
        url: "/state1",
        templateUrl: "state1.html",
        controller: "State1Ctrl",
        controllerAs: "state1Ctrl"
    })
    .state("state2", {
        url: "/state2",
        templateUrl: "state2.html",
        controller: "State2Ctrl",
        controllerAs: "state2Ctrl"
    });
}

app.controller("State1Ctrl", ["$rootScope", "$scope", State1Ctrl]);

function State1Ctrl($rootScope, $scope){
    var vm = this;
    vm.msg = "State 1";
    if(annyang){
        var commands = {
            'test': function(){
                vm.msg = "HERE2";
                $rootScope.$apply();
            },
            'hello': function(){
                vm.msg = "HERE1";
                $rootScope.$apply();
            }
        };

        annyang.debug();
        // Add our commands to annyang
        annyang.addCommands(commands);
        // Start listening. You can call this here, or attach this call to an event, button, etc.
        annyang.start();


        $scope.$on("$destroy", function dismiss() {
            annyang.abort();
        });
    }
}

app.controller("State2Ctrl", ["$scope", State2Ctrl]);

function State2Ctrl(){
    var vm = this;
    vm.msg = "State 2";
}
})();

state1.html

<div>
<p>State 1</p>
<p>Message: {{state1Ctrl.msg}}</p>
</div>

state2.html

<div>
<p>State 2</p>
<p>{{state2Ctrl.msg}}</p>
</div>

请帮我解决这个问题。

$ rootScope。$ apply无法恢复到初始状态

0 个答案: