1

问题很简单。在库检测到成功的命令后，我在其他库 (Annyang) (talater.com) 的函数中调用 $rootScope.$apply。它工作正常。但是，当我移动到另一个状态并回到我的初始状态时，它就不起作用了。该库仍会捕获我的所有命令，但 $rootScope.$apply 不会将更改“应用”到我的视图中。

重现方式：转到“状态 1” -> 允许麦克风访问 -> 说“你好”/“测试” -> 期望视图中的消息发生变化 -> 转到“状态 2” -> 回到“状态” 1" -> 说“hello”/“test” -> 期望视图中的消息发生变化（但不会发生）

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

索引.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>

应用程序.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>

请帮我解决这个问题。

4

0 回答 0