Question

我刚读完directive docs并且我仍然不理解如何使用可重复使用的代码完成以下操作。我有多个表单字段，最适合在select > option设置中使用，但是我希望用带有模板的指令替换它，因为移动浏览器处理select的方式（iOS放大了{ {1}}和我的一些值太长，无法在显示屏中查看。

所以我的模板看起来像这样：

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，但我正在尝试执行此操作正确

Answer 1

您需要使用您在那里的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>

Answer 2

为了清楚起见，指令可以通过使用指令的$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>

使用可重用的指令进行表单输入

2 个答案: