11

表示ロジックをコントローラー内に配置することは想定されていないことを知っています。これにアプローチするための適切な 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 は私のデータが保存されている場所です。

Foundation の$("#modalAddWidget").reveal();関数は、モーダル オーバーレイを表示します。

表示コードをコントローラー内に配置するべきではないため、これにアプローチする適切な方法は何ですか?

4

1 に答える 1

21

コントローラーから 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>

基本的に、スコープにブール値を設定して、モーダルを表示および非表示にします。（モーダルのオープン/クローズメカニズムを明らかにするかどうかわからないので、上記のコードで推測しています）。

また、そこにいくつかの検証を追加する努力をしました。

于 2013-02-19T21:01:56.900 に答える