Javascript AngularJS scope.watch以非常慢的速度启动并忽略更改_Javascript_Android_Css_Angularjs_Angularjs Scope

Javascript AngularJS scope.watch以非常慢的速度启动并忽略更改

javascript android css angularjs

Javascript AngularJS scope.watch以非常慢的速度启动并忽略更改,javascript,android,css,angularjs,angularjs-scope,Javascript,Android,Css,Angularjs,Angularjs Scope,我试图将一个变量从控制侧菜单抽屉（基于）的控制器传递到内容的指令，以便能够根据侧菜单的打开程度改变内容的不透明度 <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script&g

我试图将一个变量从控制侧菜单抽屉（基于）的控制器传递到内容的指令，以便能够根据侧菜单的打开程度改变内容的不透明度

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

我的第一次尝试是使用$scope.$watch the drawer.style.transport.translate3d执行此操作，方法如下：但是没有成功，所以我改变了我的方法，以获得抽屉控制器使用的当前变量

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

现在的问题是，查看控制台监视只会在值outX的20或30次更改中触发一次。我在codepen中看到过最差的$watch从未被解雇，但在我的浏览器中，直接从IntelliJ或android设备加载，我在日志中看到：

    Starting drag
c_menu.js:166 Offset: 16
c_menu.js:227 48 16 32 -418
c_menu.js:227 49 16 33 -417
c_menu.js:227 50 16 34 -416
c_menu.js:227 51 16 35 -415
c_menu.js:227 52 16 36 -414
c_menu.js:227 54 16 38 -412
c_menu.js:227 55 16 39 -411
c_menu.js:227 56 16 40 -410
c_menu.js:227 57 16 41 -409
c_menu.js:227 58 16 42 -408
c_menu.js:227 59 16 43 -407
c_menu.js:227 61 16 45 -405
c_menu.js:227 62 16 46 -404
c_menu.js:227 63 16 47 -403
c_menu.js:227 64 16 48 -402
c_menu.js:227 65 16 49 -401
c_menu.js:227 66 16 50 -400
c_menu.js:227 68 16 52 -398
d_menu.js:62 -398
c_menu.js:227 67 16 51 -399
c_menu.js:227 68 16 52 -398
c_menu.js:227 69 16 53 -397
c_menu.js:227 70 16 54 -396
c_menu.js:227 71 16 55 -395
c_menu.js:227 72 16 56 -394
d_menu.js:62 -394
c_menu.js:227 73 16 57 -393
c_menu.js:227 75 16 59 -391
c_menu.js:227 76 16 60 -390
c_menu.js:227 77 16 61 -389
c_menu.js:227 78 16 62 -388
c_menu.js:227 79 16 63 -387
c_menu.js:227 80 16 64 -386
d_menu.js:62 -386
c_menu.js:227 82 16 66 -384
c_menu.js:227 83 16 67 -383
c_menu.js:227 84 16 68 -382
c_menu.js:227 85 16 69 -381
c_menu.js:227 86 16 70 -380
c_menu.js:227 87 16 71 -379
d_menu.js:62 -379
c_menu.js:227 87 16 71 -379
c_menu.js:227 86 16 70 -380
c_menu.js:227 85 16 69 -381
c_menu.js:227 84 16 68 -382
c_menu.js:227 83 16 67 -383
c_menu.js:227 81 16 65 -385
c_menu.js:227 80 16 64 -386
c_menu.js:227 79 16 63 -387
c_menu.js:227 78 16 62 -388
c_menu.js:227 77 16 61 -389
d_menu.js:62 -389
c_menu.js:227 76 16 60 -390
c_menu.js:227 74 16 58 -392
c_menu.js:227 75 16 59 -391
c_menu.js:227 76 16 60 -390
c_menu.js:227 77 16 61 -389
c_menu.js:227 78 16 62 -388
c_menu.js:227 79 16 63 -387
c_menu.js:227 80 16 64 -386
d_menu.js:62 -386
c_menu.js:191 End drag

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

我想做的事情的一个小版本可以在这里找到： HTML

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

编辑：

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

过了一段时间，我回到这个话题，了解了更多关于离子，角度和所有这些东西的知识，我已经做了一些方法

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

对于黑屏，因为我将有多个侧菜单，我决定在机身上使用与侧菜单和ion nav视图平行的窗口：

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

<darkscreen class="darkscreen" id="iddarkscreen"></darkscreen>

和css：

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

.darkscreen {
    z-index: 50;
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .7;
    transition: opacity 300ms ease-in-out;
}

下一步是修改getdarkvalue函数中的z-index参数，使其始终位于目标之下，并屏蔽其余部分。

最后一步是使不透明度渐进

监听器函数通过

$Ionicspirture附加。在

上，在Angular的上下文之外执行，并且不触发摘要循环，这意味着观察者不会看到任何更改

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

如果在

doDrag

函数中添加

$scope.$apply（）

，您将注意到观察者将开始看到更改

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

不过我不推荐这个。由于

doDrag

函数执行了如此多的次数，因此要使应用程序执行摘要循环的次数相等，尤其是在大型应用程序和移动设备上

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>

在这种情况下，我建议使用一个指令来侦听拖动事件并直接修改元素的不透明度，而不是依赖摘要循环和Angular的数据绑定。

嗨，tasseKATT，是的，但我在等待更多答案，所以我开始做我应用程序的其他事情，我同意你的说法，在doDrag上调用$scope.$apply会很昂贵，但我还没有尝试过。一旦我恢复这一部分，我会说些什么。这很好，谢谢你的更新：）自从上次编辑“2016年4月6日”以来还没有，因为现在正在为我需要的工作。它在待办事项清单上，但我还有其他优先任务。它缺少了不透明度变量，具体取决于拖动索引。对此有任何更新吗？没有tasseKATT，我不再使用Ionic或其他web、应用程序代码。我回到硬件：）希望你找到最好的解决方案。我能说的是，接替我工作的人不再做ionic了，回到了原生的android java，我最后看到的东西比ionic应用的表现要好得多。

        <link href="http://code.ionicframework.com/1.0.0/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    </head>

    <body ng-app="myapp" >
        <drawer side="left">
            <ion-content>
                <h2>Menu</h2>
                <button ng-click="closeDrawer()">Close</button>
                <ion-list>
                    <ion-item>Friends</ion-item>
                    <ion-item>Favorites</ion-item>
                    <ion-item>Search</ion-item>
                </ion-list>
            </ion-content>
        </drawer>
        <ion-pane>
            <content>
                <button ng-click="openDrawer()">Open</button>
            </content>
        </ion-pane>
    </body>
</html>