从角度打开jquery对话框的最佳做法是什么？

继承人的HTML：从角度打开jquery对话框的最佳做法是什么？

<div ng-controller="MyCtrl"> 
    <a ng-click="open()">Open Dialog</a> 
    <div id="modal-to-open" title="My Title" ui-jq="dialog" ui-options="{width: 350, autoOpen: false, modal: true}"> 
     Dialog Text 
    </div> 
</div>

而这里的JS：

function MyCtrl($scope) 
{ 
    $scope.open = function() { 
     $('#modal-to-open').dialog('open'); 
    } 
}

这是去这样做的最佳方式？似乎有可能有一个更好的方式来打开它而不访问DOM，但我不知道我会怎么做。上面的代码有效，我只是想知道这是否应该这样做。任何输入是受欢迎的。

来源

2012-10-19 testing123

对于那些有兴趣我刚刚完成获取角度引导用户界面对话框的服务工作，我真的很喜欢它：http://angular-ui.github.io/bootstrap/ – testing123

“最佳实践”在这里很模糊。如果它的可读性和它的工作原理，那么你在那里90％，国际海事组织，这可能是好的。

这就是说，“角办法”是保持DOM操作了控制器，并使用依赖注入，以确保一切是可测试。很明显，你上面说明的方式很难测试，并将一些DOM操作放在控制器中。

我想我会做什么，以获得DOM操作出来的控制器是使用指令：

一个简单的指令，以配合您的对话框公开征集到一个点击一个元素：

app.directive('openDialog', function(){ 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
      var dialogId = '#' + attr.openDialog; 
      elem.bind('click', function(e) { 
       $(dialogId).dialog('open'); 
      }); 
     } 
    }; 
});

并在标记它会像这样使用：

<button open-dialog="modal-to-open">Open Dialog</button>

现在，这显然是非常基本的。如果你愿意的话，你可以用它来获得更高级的性能，在对话框中为不同的选项添加额外的属性。

你甚至能走得更远，并添加打开的对话框为您服务，所以你可以把它注射到你的控制器，甚至你的指令，并获得该呼叫离开那里的方式。例如：

app.factory('dialogService', [function() { 
    return { 
     open: function(elementId) { 
      $(elementId).dialog('open'); 
     } 
    }; 
}]);

而这里正在使用中。这似乎很愚蠢，因为它本质上是一回事。但主要是因为这是一个非常简单的例子。但它至少利用DI并且是可测试的。

app.controller('MyCtrl', function($scope, dialogService) { 
    $scope.open = function() { 
     dialogService.open('#modal-to-open'); 
    }; 
});

无论如何。我希望所有这些都可以帮助你决定你想要采取什么样的道路。有一千种方法可以做到这一点。 “正确”的方式是无论什么作品，允许你做任何你需要做的事（测试或其他），并且易于维护。

来源

2012-10-19 12:58:28

感谢详细的解答。我想我会走服务路线。我喜欢。好建议！ – testing123

@ ben-lesh，dialogService工厂中缺少“]”。 – HoffZ

从角度打开jquery对话框的最佳做法是什么？

回答

相关问题