對錶單輸入使用可重複使用的指令

我剛剛閱讀了directive docs，我仍然不理解如何用可重用代碼完成以下操作。我有多個表單字段，最好在select > option設置中使用，但是我正在尋求用一個帶有模板的指令替換它，因爲移動瀏覽器的處理方式如下（iOS放大了option，我的一些值也是如此長時間在顯示器中查看）。對錶單輸入使用可重複使用的指令

所以我的模板會是這個樣子：

<div class="list"> 
    <div class="option" ng-repeat="option in form.questionOneOptions" ng-click="selectOption(option)"> 
     {{option}} 
     <i class="checkIcon" ng-if="option.isSelected"></i> 
    </div> 
</div>

這將是詳細信息頁面上的唯一的事情。其父頁面是您要填寫的字段列表，這是數據需要提供的位置。我只是不知道該從哪裏開始。每個問題都有一個單獨的範圍，它包含了這個問題的選項。需要有一種方法來給指令提供選項列表。所有問題都有一個涵蓋範圍，以便將記錄的答案保存在一個對象中，如form。

我知道我可以用一個單一的控制器和複製這樣做/粘貼以上，並住在控制器的一個大質量天體改變form.questionOneOptions，但我想通過限制我的DOM操作該做正確方式指令。

來源

2016-01-21 Larry Rubin

如果你提供一些到目前爲止你已經寫嘗試做到目前爲止，我只是用'select'和'option's魔術發生 –

的代碼，這將是有幫助的。每個選擇與一個'ng-model'配對。我只是不知道從這個指令開始。 –

您將要使用您在那裏的html作爲您的指令的模板。然後在鏈接函數中實現selectOptions。

app.directive('gsQuestion', function() { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: { 
      ngModel: '=', 
      options: '=' 
     }, 

     template:'<div class="list">'+ 
        '<div class="option" ng-repeat="option in options" ng-click="selectOption(option)">'+ 
        '{{option}}'+ 
        '<i class="checkIcon" ng-if="option.isSelected"></i>'+ 
       '</div></div>', 

     link: function(scope, element, attrs) { 
      scope.selectOption = function(option) 
      { 
       // implement selectOption 
      } 
     } 
    }; 
});

然後你可以在你的html中使用指令。

<gs-question ng-model="myValue1" options="form.questionOneOptions"></gs-question> 
<gs-question ng-model="myValue2" options="form.questionTwoOptions"></gs-question>

來源

2016-01-21 20:15:12

酷，這是我需要的一個很好的起點。我還需要將'ngModel'添加到鏈接參數中，並使用'ngModel。$ setViewValue（option）'來更新我的控制器的模型。 –

要明確一點，指令可以通過使用指令的$scope變量來共享數據到視圖或從視圖中共享數據。

angular.module('app', []) 
.directive('mySampleDirective', function(){ 
    return{ 
    restrict: 'AE', 
    scope: { 
    data: '=' // this sets up a two way binding 
    } 
}, 
link: function(scope, element, attributes){ 
    console.log(scope.data) // <---- this is where you would do DOM manipulation, 
          // because you have access to the element. 
} 
})

然後在您的標記中，傳入要在您的指令中提供的數據。

<my-sample-directive data="FeeFee"></my-sample-directive>

來源

2016-01-21 20:14:20 frishi

對錶單輸入使用可重複使用的指令

回答

相關問題