Javascript 如何使用AngularJS创建交互丰富的web应用程序？

自从我得到AngularJS以来，这一直是我的问题

是的，AngularJS提供了演示和逻辑之间的彻底分离。然而，我发现自己陷入了这样一个两难境地，有时我真的无法抗拒直接从我的服务中操纵某些DOM元素的诱惑，这显然不是最佳实践，因为AngularJS建议在指令中进行操作，我觉得这很累人，特别是在我想创建具有沉浸式体验的应用程序的情况下

最近，我使用node webkit参与了一个本机应用程序项目。我们希望利用AngularJS构建一个包含HTML5和Node.js的多文档应用程序。但我想不出实现这一目标的方法。就我而言，即使嵌套视图也不容易创建，也不推荐使用AngularJS，更不用说多窗口了

同时，我觉得在这方面我很满意。然而，出于其他原因，我仍然更喜欢AngularJS

---

那你觉得呢？这个问题有什么解决办法吗？有没有开源项目？代码示例也非常受欢迎。提前服用Thx。

你一定要仔细看看爱奥尼亚。 他们仍处于测试阶段，但在从用户界面到性能的各个方面都有了巨大的改进

ionic library非常直截了当，angular在f/e逻辑方面非常出色，cordova在API方面证明了自己是生产级材料。对于一个跨平台的解决方案，拥有（几乎）单一的代码库，比任何其他的考虑都要重要，因为它需要尽快推出一个原型

---

如果您不反对引入另一个框架，我将推荐和。UI引导是Angular团队编写的一组指令。我发现它在执行我们需要的所有UI操作方面都非常全面。当然，如果您需要更多功能，您可以随时扩展指令

---

甚至有一个指令，为工作的治疗。请看一看。

处理onscroll的简单指令可能是这样的：

    app.directive('myScrollWindow',function($window){

    return function(scope,element,attrs) {

       angular.element($window).bind('scroll',function(){

       // do your stuff here
       // for example:
       if(this.pageYOffset >= 50) {
         // do something
       }


       });
       scope.$apply();
     }
   });

作用域。$apply（）是此操作的关键

重点是，您可以在指令内执行几乎任何操作

更新

您可以添加一个按钮并按如下方式显示模式： （我假设您正在使用Twitter引导程序进行模态分析）

app.directive（'blah'，function（）{
功能链接（范围、要素、属性）{
var modal=elem.find（'.modal'）；
scope.openDialog=函数（）{
modal.show（）；
}
}
返回{
限制：'E，A'，
链接：链接，
模板：“单击我…”
}
});

---

element.find（）将只查看指令的模板内部。它不会对模式css类进行完整的DOM搜索。这就是指令的美妙之处

当你说通过指令操作DOM很累人时，你能说得更多吗（我个人觉得更容易而且“安全”）？你能给我们展示一个具体的例子，让我们或许能理解为什么你觉得它令人畏惧吗？@AntónioSérgioSimões说，为了与AngularJS对话，我需要创建一个指令。首先，如果对话框包含根据用户的实时输入而变化的动态DOM，我发现指令没有多大用处（我很保守，所以我仍然会选择用指令包装它，但它不是一个拖拉吗？）；相反，我发现直接使用jQuery更加灵活和简洁。其次，为了符合语义规则，在HTML文档中放置一个对话框而不是动态附加它不是一个好的做法。根据您的意见，我应该从哪里着手呢？Thxy您仍然可以在指令中使用纯jQuery，另外还可以直接引用要附加新HTML的元素，而不是执行DOM查询。要添加，有时我会发现不可避免地执行一些“脏”操作DOM不符合最佳实践的东西，例如window.onscroll=function（）{}。你认为我应该把它放在哪里？我应该为此创建一个指令并将其附加到根元素，还是应该为这类事情单独创建一个“dirty.js”？对于后者，访问$scope会有问题；然而，对于前者，该指令似乎有点不必要。引用：“即使是嵌套视图也不容易创建，也不推荐使用AngularJS”您查看过AngularUI路由器吗？我建议查看页面底部的视频，它们很好地展示了如何创建包含多个独立部分的嵌套视图。希望这对你有所帮助谢谢你的回答。Ionic是一个针对移动设备的混合跨平台开发框架，而我这里所说的“应用”是一个广义的概念，包括在移动操作系统以外的平台上运行的WebApp和本机应用。很好的提示：）不过，你认为在不与AngularJS分手的情况下创建交互式动画可行吗？Angular UI使用CSS3转换来处理动画，这很优雅，但没有那么灵活。它使用CSS3动画。我发现Angular周围建立了一个非常强大的社区，因此能够为我需要构建的任何东西找到一个好的解决方案。然而，你在问题中提到了骨架，因为它让你更接近金属，它让你更灵活。意识到您将编写更多Angular提供给您OOTB的样板代码。如果我想在用户单击按钮时打开一个对话框，我应该编写另一个作为属性的指令并将其附加到按钮上吗？或者如果可以将“onclick”属性设置为作用域内的OpenDialog（）函数，则单击“确定”。谢谢你的努力。我将您的设置为已接受。：）非常感谢。尽管下面有很好的答案：）事实是，指令可以

   app.directive('blah',function(){

    function link(scope,elem,attrs){
        var modal = elem.find('.modal');

        scope.openDialog = function(){
            modal.show();                
        }
    }

return {
  restrict:'E,A',
  link: link,
  template:"<button type=\"button\" ng-click=\"openDialog()\">Click me</button><div class=\"modal hide fade\">...</div>"
}
});