1

問題はかなり簡単です。ライブラリによって検出されたコマンドの成功時に、他のライブラリ (Annyang) (talater.com) の関数で $rootScope.$apply を呼び出しています。それは正常に動作します。しかし、別の状態に移動して最初の状態に戻ると、機能しません。ライブラリは引き続きすべてのコマンドをキャッチしますが、$rootScope.$apply は変更をビューに「適用」しません。

再現方法: 「状態 1」に移動 -> マイク アクセスを許可 -> 「こんにちは」/「テスト」と発声 -> ビュー内のメッセージの変更を期待 -> 「状態 2」に移動 -> 「状態」に戻る1" -> "hello"/"test" と言う -> ビュー内のメッセージの変更を期待する (しかし起こらない)

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>

この問題を解決するために私を助けてください。

4

0 に答える 0