我知道您不应该将显示逻辑放在控制器中,并且我正在努力使用正确的AngularJS方法来实现此目的。
我正在模态内展示表格。我正在使用Zurb Foundation的揭示模式。
标记:
<div class="button" ng-click="modalAddWidget">Add Widget</div> <div id="modalAddWidget" class="reveal-modal"> <h6>New Widget</h6> <form> <fieldset> <legend>Widget Name</legend> <input type="text" ng-model="ui.add_widget_value" /> </fieldset> <div class="small button right" ng-click="addWidget()">Add Widget</div> <div class="small button right secondary" ng-click="addWidgetCancel()">Cancel</div> </form> </div>
控制器:
... $scope.modalAddWidget = function() { $("#modalAddWidget").reveal(); } $scope.addWidget = function() { $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value}); $scope.ui.add_widget_value = ''; $('#modalAddWidget').trigger('reveal:close'); } $scope.addBudgetCancel = function() { $scope.ui.add_widget_value = ''; $('#modalAddWidget').trigger('reveal:close'); } ...
注意:$ scope.ui是我用来存储UI值的对象,在用户实际单击“添加小部件”之前,该值不应绑定到我的对象
$ scope.myobj是存储我的数据的位置。
基金会的$("#modalAddWidget").reveal();职能提出了模式叠加。
$("#modalAddWidget").reveal();
由于我不应该将显示代码放入控制器中,因此正确的处理方法是什么?
您不想从控制器中操作DOM(甚至引用它)。
最好在此处使用指令。
app.directive('revealModal', function (){ return function(scope, elem, attrs) { scope.$watch(attrs.revealModal, function(val) { if(val) { elem.trigger('reveal:open'); } else { elem.trigger('reveal:close'); } }); elem.reveal(); } });
然后在您的控制器中:
$scope.modalAddWidget = function (){ $scope.ui = { add_widget_value: '' }; $scope.showModal = true; }; $scope.addWidget = function (){ $scope.myobject.widgets.push({"name": $scope.ui.add_widget_value}); $scope.ui.add_widget_value = ''; $scope.showModal = true; };
在您的HTML中
<div class="button" ng-click="modalAddWidget()">Add Widget</div> <div id="modalAddWidget" class="reveal-modal" reveal-modal="showModal"> <h6>New Widget</h6> <form name="addWidgetForm" ng-submit="addWidget()"> <fieldset> <legend>Widget Name</legend> <input type="text" name="widgetValue" ng-model="ui.add_widget_value" required /> <span ng-show="addWidgetForm.widgetValue.$error.required">required</span> </fieldset> <button type="submit" class="small button right">Add Widget</button> <div class="small button right secondary" ng-click="showModal = false;">Cancel</div> </form> </div>
基本上,您将在范围内设置一个布尔值以显示和隐藏模态。(我不确定透露模态的打开/关闭机制,所以我在上面的代码中猜测)。
还:我努力在其中添加一些验证。