從角度打開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對話框的最佳做法是什麼？

回答

相關問題