范围设置后启动SVG动画 - angularjs - SVG [英] Start svg animation after scope is set - angularjs - svg
问题描述
林作出的Android游戏，包括一个路线图。 （5世界，7站各图）
Im making an android game including an roadmap. (5 worlds, 7 stops each map)
如果该级别3的用户进行动画处理的行走停止3。
if the level is 3 the user has to animate the walking to stop 3.
我创造了这个SVG动画
I created this svg animation
<animateMotion id="test" begin="0.5s" dur="3s" repeatCount="0" rotate="0" path="{{animate}}" fill="freeze"/>
我使了，如果其他功能它的范围就应该使用它工作正常。（每路线图有7个站/水平，我的水平是3等属性都连接好到页面它的作用域world1）
it works fine until i make an if else function for which scope it should use.(each roadmap has 7 stops/levels, my level is 3 and it scopes world1 so the properties are connected well to the page)
information.once("value", function(snapshot) {
var data = snapshot.val();
if (data.level < 7) {
console.log("world1");
$scope.animate = "M0,0 q225,150 0,200";
}
else if (data.level > 7) {
console.log("world2")
$scope.animate = "M0,0 0,0 0,0";
}
});
我认为问题是，之前SVG负载如果else语句完成采摘正确的范围。
i think the problem is that the svg loads before the if else statement is done picking the correct scope.
有没有办法使用的角度来启动动画？而不是自动的onload发挥。
Is there any way to start the animation using angular? instead of the automatic onload play.
（所述information.once和数据快照是在我的用户数据存储火力）
(the information.once and the data snapshot are for firebase where my user data is stored)
推荐答案
为使您的上述code的工作，你可能只需要通知你的价值观已经改变异步编译器。见<一href=\"http://stackoverflow.com/questions/21922470/how-come-angular-doesnt-update-with-scope-here/21923026#21923026\">this发布了解有关异步OPS与棱角分明。
To make your above code work, you probably just need to notify the compiler that your values have changed asynchronously. See this post for more about async ops with Angular.
但在这里最好的答案将是利用工具来充分发挥其潜力，并采取折角的强大功能优势，火力地堡提供给你管理这些各种各样的复杂问题。该文档的一个很好看的是一个伟大的方式来获得与痛苦少和摩擦向前迈进。
But the best answer here would be to utilize the tools to their full potential and take advantage of the great features Angular and Firebase provide to you for managing these sorts of complex issues. A good read of the docs is a great way to get moving forward with less pain and friction.
You can use routes and the resolve method to avoid timing issues in your views.
具体而言，你将加载中的数据路径和直到数据被下载未呈现的路由。利用 AngularFire ，你可以用$（）方法加载做到这一点。
Specifically, you would load the data in your route and not render the route until the data has been downloaded. Utilizing AngularFire, you could do this with the $loaded() method.
app.config(function($routeProvider) {
$routeProvider.when("/home", {
controller: "HomeCtrl",
templateUrl: "views/home.html",
resolve: {
// controller will not be loaded until $waitForAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"syncedData": function($firebaseObject) {
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/path/to/data");
return $firebaseObject(ref).$loaded();
}
}
});
});
现在在你的控制器，你可以简单地调用注入的依赖性：
Now in your controller, you can simply call the injected dependency:
app.controller('HomeCtrl', function($scope, syncedData) {
// guaranteed to be loaded when this controller is rendered
$scope.syncedData = syncedData;
});
您也可以与芯火力地堡SDK这项工作，而不是用AngularFire，它只会要求你创建它返回一个承诺服务，并使用路由器而不是$ firebaseObject：
You could also make this work with the core Firebase SDK and not use AngularFire, it would simply require that you create a service which returns a promise, and use that in the router instead of $firebaseObject:
app.factory('loadData', function($q) {
return function(ref) {
return $q(function(resolve, reject) {
ref.once('value', function(snap) {
resolve(snap.val());
}, reject);
};
}
});
app.config(function($routeProvider) {
$routeProvider.when("/home", {
controller: "HomeCtrl",
templateUrl: "views/home.html",
resolve: {
// use our new service in the resolve instead
"syncedData": function(loadData) {
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/path/to/data");
return loadData(ref);
}
}
});
});
有关最后一个思想，还有机会传福音如何彻底地阅读文档才能真正鼓励的API的强大用法，如果你使用一次（'值'......）与火力地堡，你可能作废所有的实时数据库的通过用一个CRUD模型代替它的电源。见导游在实时模式，而不是使用火力地堡一些好办法。
For one last thought, and another chance to evangelize how reading the docs thoroughly can really encourage powerful usage of an API, if you're using once('value'...) with Firebase, you're likely nullifying all the power of the real-time database by replacing it with a CRUD model. See the guides for some great ways to use Firebase in a real-time paradigm instead.
这篇关于范围设置后启动SVG动画 - angularjs - SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
